Safari 5.1.3 位置：修复加载滚动渲染问题答案

【问题标题】：Safari 5.1.3 Position:Fixed Loading Scrolling Render IssueSafari 5.1.3 位置：修复加载滚动渲染问题
【发布时间】：2012-04-07 15:29:45
【问题描述】：

http://hungimage.herokuapp.com/ 在 Safari 中滚动加载页面时遇到问题的 POC。页面底部的图像调用正在请求一个不会返回响应的端点，以保持页面加载并显示渲染问题。

当页面正在加载并且所有资源尚未下载时，如果我在 Safari 版本 5.1.3 (7534.53.10) 中滚动，固定位置的标题将不正确地呈现。如果您在 Safari 中快速上下滚动，您应该能够检测到渲染问题。

我无法在其他浏览器中复制这一点，并且需要一种不会对绝对定位元素的位置产生不利影响的解决方案。您可以在此处观看截屏视频：http://www.flickr.com/photos/geoff/6861146330/

我是否缺少位置：固定的东西？

更新：

这似乎是一个合法的 Safari 错误。如果您在 Safari 5.1.4 的一个选项卡中打开了一个挂起的页面（永远加载 - 此处示例：geoffreymoller.no.de）图像，并且在另一个选项卡中打开了一个具有固定标题的站点（facebook，此处的其他示例：@987654323 @)，如果在固定页眉站点中滚动，页眉会显示渲染问题。

【问题讨论】：

在我的 iMac Safari 534.54.16 上没有发生
在任何浏览器中都没有发生相同的情况。我刚刚下载了最新版本的 safari 5.1.4 没有问题。但我没有 5.1.3。所以我不能说什么，因为你在那个特定的浏览器中遇到了问题。

标签： css safari rendering css-position

【解决方案1】：

两件事可以对代码进行防弹；

制作 div：

<div id="fixed"></div>

页面中的语义容器，并在 div#fixed 规则中添加如下 CSS 声明

z-index:99;

希望对 Geoff 有所帮助。

【讨论】：

嗨 Desi - 我添加了 z-index 但这并不影响渲染问题。你可以在这里看到它：geoffreymoller.no.de。固定的 div 是一个 header 元素，所以它不能包含页面的其余部分。