奇怪的Safari动画渲染问题

Question

深吸一口气

好的，我有一个大的div，充当一个背景层。这个div根据您在典型的水平导航中选择的链接从左到右平移。这是个有点新奇的东西。

HTML结构：

<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 -->

CSS的简短片段：

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

Javascript只是使用jQuery来动画“左”属性。我会包括在内，但有很多事情发生，我不认为它会带来一个解决方案。

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

这种行为的视频:编辑过

在视频中，我演示了safari和firefox。正如您所看到的，在Safari中，内容在动画过程中会卷缩/出错。在Firefox中，情况并非如此。Safari似乎是唯一这样做的浏览器。它甚至可以在IE6中工作。:)

出现“皱缩”的div似乎是<div id="header" class="grid_9 suffix_3 alpha omega">，但有时您可以看到一个滚动条，这表明<div id="scroll">可能是根本原因。

这是一个常见且可以避免的Safari渲染问题吗？还是我应该吸下去？

提前感谢！

Answer 1

您必须在原始元素上设置-webkit-transform: transform，这样才能在加载时加速硬件。