固定元素和溢出隐藏的 Chrome 渲染问题答案

【问题标题】：Chrome rendering issue with fixed element and overflow hidden固定元素和溢出隐藏的 Chrome 渲染问题
【发布时间】：2015-05-19 21:18:43
【问题描述】：

我有一个固定的水平菜单，在 Firefox 上运行良好，但在某些 chrome 实例中出现问题。当用户向下滚动时，一个白色块会覆盖菜单。

你可以在这里看到问题：http://brandca.co/cterranum/

我们检查了元素，但在代码中似乎没有任何内容，看起来更像是渲染问题。

我们注意到，当我们删除元素的overflow:hidden 时，问题得到了解决，但我们需要这个属性来切换菜单。

我们无法准确确定它何时发生，因为它看起来只发生在某些计算机上，即便如此，正确呈现网站的计算机在投影屏幕上进行演示时也发生了问题。

【问题讨论】：

【解决方案1】：

固定元素在某种程度上破坏了 webkit 的渲染，所以我将元素转换为 position: absolute 并在滚动事件中更新顶部值，使其看起来像是固定的。它不漂亮，但很有效。

【讨论】：

【解决方案2】：

元素具有“位置：绝对；”里面有 .inner-header 有“位置：固定;”。

尝试将“.inner-header”移到“.header”之外。

【讨论】：