Safari でのみ発生する Web サイトでいくつかの問題が発生しています。Mac でバージョン 5.1.7 (7534.57.2) を実行しています。
サイトはhttp://mcad.edu/annual-report-2011-12/でご覧いただけます。
Web サイトはパララックス スクロールであり、すべてが固定され、上と左が 0 に設定されている 3 つのパララックス スクロール背景を含む、すべてを保持する相対的に配置されたコンテンツ div を備えています。
固定視差の背景コンテナー内で、ユーザーがマウスオーバーすると、カラー化された画像がフルカラー画像にフェードします。「画像」ごとに 2 つの div が積み重なっており、それぞれに background-position によって配置された背景画像があります。下部の div には、カラー化された画像があります。上部の div には背景としてフルカラーの画像があり、マウスオーバーするまで不透明度が 0 に設定されています。上部の div が表示されるように、不透明度プロパティの CSS トランジションを使用してフェードを実現します。
そのため、Safari でのみ、これらの div のいずれかにマウスを合わせると、移行はスムーズに行われますが、同じ視差スクロールの背景 div 内のすべてのコンテンツがその過程でシフト/ジャンプします。CSS トランジションを削除すると、これは発生しません。
transition/webkit-transition プロパティが Safari の固定位置コンテナーでうまく動作しないことに関係があるのではないかと思います。ただし、これに関連して私が見つけた問題はすべて 2010 年のものであり、2 年後に修正されたと思われる Safari のバグについて言及しています。しかし、そうではないかもしれません。
Catalyst セクションにも別の問題があります (右側のナビゲーションの 3 番目のドット)。これらのアニメーション画像は、Chrome、Firefox、Opera ではリンクとして機能しますが、Safari では機能しません。何か案は？