Javascript 奇怪的Safari动画渲染问题

深呼吸

好的，我有一个大的div作为背景层。此div根据您在典型水平导航中选择的链接从左向右平移。这有点新奇

HTML结构：

Javascript只是使用jQuery来设置“left”属性的动画。我会把它包括在内，但还有很多事情要做，我不认为这会有助于解决问题

---

基本上，当背景div从第一个位置滚动到最后一个位置时，内容在Safari中似乎会短暂地“滚动”

此行为的视频： [修订]

在视频中，我演示了safari和firefox。如您所见，在Safari中，内容在动画过程中会出现扭曲/故障。在Firefox中，它不是。Safari似乎是唯一能做到这一点的浏览器。它甚至可以在IE6中工作。：）

显示为“scrunch”的div似乎是

，但有时您会看到一个滚动条，提示

可能是根本原因

这是一个常见且可以避免的Safari渲染问题吗？还是我应该接受它

---

提前谢谢

您必须在原始元素上设置

-webkit transform:transform

，以便在加载时加速硬件。

我认为这不是“常见的Safari bug”。我认为没有测试用例就很难调试。考虑用一个或如果你能在那里复制它。完美！如果我能多次投票，我会的。对于其他人，如果有问题：我在background div中设置了这个。

<div id="scroll">
        <div class="container_16">
            <div id="header" class="grid_9 suffix_3 alpha omega">           
                <!-- the links that control animation -->
                <ul>
                    <li><a href="example link">Example 1</a></li>
                    <li><a href="example link">Example 2</a></li>
                </ul>
            </div> <!-- end #header --> <div class="main grid_8 alpha omega">
        <div class="content grid_12 alpha">
            <div id="the_content">
                <!-- content is loaded in here via ajax -->
            </div><!-- end the_content -->
        </div><!-- end .content -->

        <div class="clear"></div>
        <div id="footer">
            Footer stuff
        </div>
    </div> <!-- end .main .grid_8 .alpha .omega -->
</div> <!-- end .container_16 -->
</div> <!-- end scroll -->

#background_container {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1000;
    width: 100%;
    height: 100%;
}
#scroll {
    width: 100%;
    height: 100%;
    overflow: auto;
}