奇怪的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动画 “左” 的属性。我会包括它，但有很多事情正在进行，我认为这不会带来一个解决方案。

---

基本上，当从第一位置到最后位置的背景格滚动，内容似乎在Safari中“蜷缩”简要介绍。

视频的这种行为： [绝密]

在视频中，我演示Safari和Firefox浏览器。正如你所看到的，在Safari中，内容会在动画过程中出现毛刺/毛刺。在Firefox中，它没有。 Safari似乎是唯一一款能够做到这一点的浏览器。它甚至可以在IE6中运行。 :)

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

这是一个常见的Safari浏览器渲染问题，可以避免吗？或者我应该把它吸起来？

在此先感谢！

Answer 1

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