调整表格大小时 Chrome 渲染错误，标题背景贴在另一个 div 的顶部

Posted 2023-02-22

【中文标题】调整表格大小时 Chrome 渲染错误，标题背景贴在另一个 div 的顶部

【英文标题】：Chrome Render Bug while resizing Table, header background stick on top of another div

【发布时间】：2017-04-07 08:47:27

【问题描述】：

我有两个不同的面板，它们可以通过拖动来调整大小。 在其他浏览器中一切正常，但在 chrome 中，标题的背景以某种方式粘在父 div 上。看来Chrome和skia graphics的新渲染问题。

请看截图或video link我附上，你会发现视频中的故障，帮助我找到解决方法。

而且，我尝试通过将background-color 应用于table、tbody 和包装器div 来压缩此问题，但有时它的行为仍然相同。

如果这不是提出这个问题的正确位置，请建议我在哪里？谢谢。

【问题讨论】：

您是否尝试使用will-change 属性？

如果没有关联的 html/CSS/JS（尤其是关联的 CSS 和 JS），将很难识别问题。我知道 Skia 在 Chrome 中的使用一直是一个值得抱怨的热门话题 (news.ycombinator.com/item?id=11367304)，但 IMO 这可能不是你的问题。您是否使用 JS 框架（如 Angular.js）和/或网格插件（如 ui-grid）？我注意到您的屏幕截图中的一些内联样式似乎具有某种动态引用......确实有太多悬而未决的问题让我无法查明问题。

@JustJen 我们正在使用 meteorJs ，所以要为模板渲染而大火。

【参考方案1】：

关于故障发生在表外的事实。我会在表格包装上尝试overflow: hidden。

【讨论】：

我试过溢出：隐藏，但它不起作用。你有其他方法吗？

我需要一个能够重现错误的环境来解决它。如果你能做到，那就太好了！