web-dev-qa-db-ja.com

iOS 9 Safari：スクロール中に要素を固定位置に変更すると、スクロールが停止するまでペイントされません

私はサイトを開発しており、かなり良い jQuery Sticky Kit プラグインを利用しています。 positionプロパティをfixedに切り替え、適切なときに元に戻すことで動作します。デスクトップで非常にスムーズに実行され、モバイルでも問題なく動作します。

または、少なくとも以前はそうでした。 iOS 9には新しい動作が付属しています。スクロールアニメーションの実行中に、要素のpositionがstatic/relative/absoluteからfixedに変更されると、要素はスクロールが停止するまで見えなくなります。奇妙なことに、反対の変更（fixedから他のものへ）が問題なく実行されます。

実例は プラグインのホームページ にあります。黒いナビゲーションバー（「サンプルリファレンス」）はスティッキーであると想定されています。もともとは、staticlyがページの中央に配置されていました。下にスクロールするとfixedになり、（iOS 9では）スクロールが停止するまで消えます。デスクトップブラウザとiOS 8の動作は正しいです。

私は典型的なCSSの回避策を望んでいました：3D変換を強制し、背面の可視性などを無効にし、独自のプロパティを不明瞭にします...しかし、何もうまくいかないようです。

「スティッカブル」要素が機能するようになったので、完全に忘れようとしていますか？

ioscsscss-positionmobile-safariios9
67
randombumper

私はこれと同じ問題を抱えており、古い「3D変換を強制する」トリックを使用してハッキングすることができました。位置を切り替える要素を設定して、translate3d(0px,0px,0px)の変換プロパティを設定します。 positionプロパティが変更される前に、これが行われていることを確認してください。

77
Nathan G

私が正しく動作することがわかった唯一の解決策は、固定アイテムの直接の子でz-index変換を無効にすることでした。

.is-sticky > * {
    -webkit-transform: translateZ(0);
}
17
Seth Warburton

余分な固定要素でこの問題を修正しました。いくつかのテストの後、この問題が修正されるのは最初の要素であることがわかりました。 2番目、3番目などはiOSデバイスで正常に動作します。

だから、あなたの体のopeningtagの直後にdiv.fixed-fixを入れてください：

.fixed-fix {
    position:fixed;
    top:-1px; 
    height:1px; 
    width:100%; 
    background:white;
}

今では動作します！ fixed-fix div MUSTにはbackgroundcolorがあります。それ以外の場合は機能しません...

4
Arnaud van Zandwijk

jQuery Sticky Kitおよび他の同様のプラグインは、コードが適切であっても、iOS 9でこのような動作を示しています。このようなことが起こるのは初めてではありません。ここでの主なポイントは、Firefox SafariとSafari Mobileが試験的なposition: sticky;をサポートしていることです。Google（Chromium）もそうですが、統合の問題が原因です。 、一時的に無効にする必要がありました。詳細についてはこちらをご覧ください こちら 。そうは言っても、まもなくposition: sticky;はCSS仕様の一部になり、すべての主要なブラウザでサポートされるので、この問題を解決する最善の方法はプラグインの代わりにポリフィルを使用することだと思います。もちろん、ポリフィルはこれらのプラグインが提供するすべての機能をカバーするわけではありません。それでも、多くの状況で、ポリフィルを使用すると、すべての主要なブラウザーでサポートされる堅牢で効果的なソリューションとして作業が行われます。私の意見では、今のところ行くべき方法です。私は個人的に stickyfill を使用しますが、野生の他のポリフィルがトリックを行うと確信しています。私が言えることは、プラグインの代わりにポリフィルを使用し始めたので、ブラウザの互換性の問題はなかったということだけです。

3
user3724945

これを固定要素に追加します
ミキシングの使用：@include transform(translate3d(0px,0px,0px))
CSSを使用：translate3d(0px,0px,0px)

0
Yaron