FFとChromeでこのデモを見てから、以下を削除します。
-webkit-transform:translateZ(0px);
css を作成し、Chromeでもう一度確認します。
また、コンテンツを切り取るChrome本体コンテナーも作成します (常にではありません)。min-width:100%
-webkit-transform:translateZ(0px);一度に多くの要素に対して transformX + Y を使用すると、Chrome で奇妙で奇妙なブラック ボックスが表示されるのを防ぐ必要があります。
固定親コンテナー内の Google マップで同じ問題が発生しています。Google マップは translateZ プロパティを使用します。
ベータ ビルドで修正されたように見えるこのバグに関連していると思われます: http://code.google.com/p/chromium/issues/detail?id=146894
私もこの問題に遭遇しました。問題は、Google マップが DOM 要素をマップしているすべてに対して GPU 合成を強制することです。-webkit-transform: translateZ(0);
この問題を修正するには、各固定要素に追加すること
で、すべての固定配置要素で GPU 合成を強制できます。-webkit-transform: translateZ(0);
jsfiddle デモ: http://jsfiddle.net/plapier/QA7tK/