0

問題のサイトはhttp://bit.ly/7MeLwcです。

優等生のセクションで、Chrome / Safariで次の画像セットを表示すると、マウスを合わせるまで画像が切り取られているように見えます。しかし、Firefoxでは問題なく動作します！

Webkitでそのような動作を引き起こしている可能性があるのは何ですか？

4

2 に答える 2

2

これは本物の正真正銘のWebkitバグです。あなたのせいではなく、あなたのコードは正しいです、ここでの責任はウェブキットのレンダリングの実装にあります。幸いなことに修正があります！

margin-left現在、のプロパティをアニメートしていますが#list_wrapper、これがチョップの原因です。したがって、簡単な回避策とより良い回避策があります。

簡単！

cssでに設定#list_wrapperしてから、の代わりにプロパティをアニメーション化します。（実際にはマージンレフトは引き続き機能しますが、それほど良くはないので、この感謝を修正するために使用することができます）position:relativeleftleft-marginposition:relative

ここでの欠点は、ブラウザにとってあまり効率的ではないことです（マージン左のアニメーションもかなり悪いです）

より良い！

に設定し、#list_visible高position:relativeさを適切に設定します（そうしないと、デフォルトでゼロになり、リストが消えます）。次に、に設定し、プロパティを使用#list_wrapperしposition:absoluteてアニメーション化しleftます。

ここでの利点は、オブジェクトをアニメーション化するためposition:absolute、各アニメーションフレームでドキュメント全体をリフローする必要がなく、アニメーションがはるかに効率的になることです。

BESTER！

それを使いたい場合は、css3トランジションを調べてtransform、スライドを移動するためにを使用できます。これにより、html5の人々からハイタッチが発生し、可能な場合はハードウェアアクセラレーションが発生し（iPadアニメーションはスムーズになります）、CPU使用率が低下します。

（トイレにいるのもあなたですか？）

于 2012-07-11T00:47:58.880 に答える
0

囲んでいるulをクリアフィックスすることで修正する必要があります。http： //www.webtoolkit.info/css-clearfix.htmlを参照してください。

<div class="photoList">
  <ul class="clearfix">
  <li></li>
  </ul>
</div>
于 2012-07-11T00:26:37.710 に答える