5

パララックスのウェブサイトを作成しようとしています。しかし、固定位置に問題があります。

いくつかのセクションがあり、それぞれにbackground-attachment:fixed. position:fixedすべてのセクションの上に非表示の要素がある上部のメニュー バー。セクションの 1 つで 100% の Google マップ。

さて、問題は、Google Chromeでアニメーションを使用してページをスクロールすると、スクロールがスムーズにいかず、スクロール中に数回点滅することです。

.animate()greensock scrollTo plugin でスクロールを行いますが、jqueryメソッドでもテストしたので問題ありません。同じ結果です。

私は調査を行い、クロムにはバグや固定位置の問題があることがわかりました (そして、隠し要素を入れた場合もあります) いくつかのページは、固定要素でこれら2つを使用することを提案しました:

-webkit-backface-visibility:hidden; 
-webkit-transform: translateZ(0);

これを固定メニューに追加したところ、途切れ途切れの動作が軽減されましたが、まだスムーズではありません。これをbackground-attachment:fixed要素のあるセクションに追加すると、スクロール アニメーションはスムーズになりますが、固定として動作しなくなります。

クロムには大きな画像に問題があると言う人もいれば、固定位置に問題があると言う人もいれば、私にとってはうまくいかない解決策があると言う人もいます:D

ページをアップロードしました: http://www.FarzanMohajerani.com/test/parallaxページ のどこかをクリックしてスクロールします。

また、まったく同じコードで jsFiddle を作成しました。しかし、jsFiddle で問題が発生しない理由がわかりません: http://jsfiddle.net/Farzanmc/cRqxT/5/

誰かが私に正しい解決策を教えてくれたり、私が何か間違ったことをしていたら思い出させてくれたりしてくれたら嬉しいです。ありがとう

4

3 に答える 3

3

これで問題は解決しました：

-webkit-transform: translate3d(0,0,0);

このルールを追加すると、要素が Chrome のレイヤーに変わり、再描画が回避されます。私のユニークな状況では、ブラウザの再描画が原因でエラーが発生しました。

于 2016-10-09T18:48:51.040 に答える