奇怪的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，以便在加載時獲得硬件加速。