奇妙なサファリアニメーションのレンダリング問題

Question

は、私は、バックグラウンド層として機能する大きなdiv要素を持って深呼吸

[OK]を取ります。このdivは、通常の水平ナビゲーションで選択したリンクに基づいて、左から右にパンします。それは少しばかり新しいことです。

HTML構造：CSSの

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

Javascriptが単に "左" 属性をアニメーション化するjQueryのを使用しています。私はそれを含めるだろうが、多くのことが続いており、それが解決策をもたらすのに役立つとは思わない。基本的には

---

、最後の位置への最初の位置から背景のdivスクロール、コンテンツがSafariで簡単に「うずくまる」のようです。

この動作のビデオ： [編集済み]

ビデオでは、私は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を設定する必要があります。