1

Webkit が背景位置をレンダリングする方法と Firefox の方法に少し問題があります。基本的に、メイン画像と背景画像を選択する 3D カルーセルを備えた大きな背景画像であるカスタム アニメーションに取り組んでいます。次に、アニメーションがカルーセルをスライドさせ、背景を引っ張ります (以下の URL を参照)。

問題は、ページが Firefox では希望どおりにレンダリングされますが、Chrome/Safari ではレンダリングされないことです。この特定のレイアウトでは、background-position/background-attachment の処理が異なります。Chrome が何を中心にしているのかはわかりませんが、右下の象限にあるようです。

これは、より理にかなっているように、目的を簡略化した例です。FF ではうまく機能しますが、内部ウィンドウの背景のセンタリングは Webkit ではかなりずれています: http://ps12.pointsourcellc.com/webkitTest/test/test.html

中央/上部の配置で固定背景を使用しており、真の背景と中央の div 内の背景の両方に塗りつぶしが含まれています。

#aboutView .cardFront {
background-image: url('../images/bay_bridge5570.jpg'); 
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center top;
background-size: contain;
}

ここでアドバイスをよろしくお願いします。私はこの問題の原因にかなり困惑しており、それを探し回る運がありませんでした.

更新: 同僚と私は多少の「修正」を見つけましたが、まだ満足しておらず、そもそも画像の位置がずれている理由がわかりません:

  • .selectedView -webkit-transform: translate(0px, 0px); を削除します。CSSの一部
  • -webkit-backface-visibility: hidden; を削除します。CSS の一部 (これによりフリップ アニメーションの使用がより困難になりますが、これがないと中央に配置できません...)
  • Webkit 固有の background-image-position: 0px 75px; を追加します。中心に

なぜ 75 px ずれているのか、または背面の vis が影響するのかはわかりませんが、これにより、一致するものが得られます。残念ながら、この追加の翻訳を追加すると過度のちらつきが発生するため、より良い解決策に向けて取り組んでいます.

4

1 に答える 1

1

background-attachment: fixed を削除すると、どちらも同じように動作するように見えます。とにかく含まれる background-size を既に適用しているので、必要ないと思います。

于 2012-08-31T15:48:08.720 に答える