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来设置“left”属性的动画。我会把它包括在内，但是有很多事情要发生，我认为它不会有助于提出解决方案。

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

此行为的视频： [删除]

在视频中，我演示了safari和firefox。正如您所看到的，在Safari中，内容会在动画期间显示/出现故障。在Firefox中，它没有。 Safari似乎是唯一能够做到这一点的浏览器。它甚至适用于IE6。：）

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

这是一个常见且可以避免的Safari渲染问题吗？或者我应该吮吸它？

提前致谢！

Answer 1

您必须在原始元素上设置-webkit-transform: transform，以便在加载时获得硬件加速。

奇怪的Safari动画渲染问题

1 个答案: