☰

CSS3プロパティwebkit-overflow-scrolling:touchエラー質問する

tag-icon • tag-icon css webkit overflow ios5
CSS3プロパティwebkit-overflow-scrolling:touchエラー質問する

-webkit-overflow-scrolling:touchiOS 5では、iOS デバイスのハードウェア アクセラレータを使用してスクロール可能な div にネイティブ スクロールを提供する新しいプロパティが Web デザイナーにリリースされました。

開発中のサイトに実装すると、動作しますが、うまくいきません。CSS の問題があると思われるので、ここで質問します。

次のフィドル完璧に動作するのをお見せします

開発中の弊社サイトにアクセスすると、施設タブの下に同じパネルが表示されますが、iOS ではスクロールは完璧ですが、オーバーフローしたセクションは表示されず、写真が文字通り 2 つに分割されます。

http://www.golfbrowser.com/courses/mill-ride/

これをどう直せばいいのか分からないhttp://www.golfbrowser.com/photo.PNG

ベストアンサー1

@relluf が指摘したように、相対要素に 3D トランジションを適用するとバグが修正されます。ただし、もう少し調べてみたところ、適用も機能するようです-webkit-transform: translateZ(0px)(これは Google が gmaps マップ コンテナーで行っていることです)。また、相対的に配置した要素に適用する必要はなく、スクロール可能な要素の直接の子孫に適用するだけで済みます。

したがって、修正が必要なすべての場所のリストを手動で保持したくない場合は、次のようにします。

element {
    -webkit-overflow-scrolling: touch;
}

element > * {
    -webkit-transform: translateZ(0px);
}

おすすめ記事