web-dev-qa-db-ja.com

-webkit-overflow-scrolling：タッチ; AppleのiOS8の破損

私は、オーバーフローしたdivに慣性スクロールを与えるために、いくつかの場所で-webkit-overflow-scrolling:touchを使用するWebアプリに取り組んでいます。

IOS8への更新以降、-webkit-overflow-scrolling: touchを使用するとスクロールできなくなります。これまで修正できた唯一の方法は、-webkit-overflow-scrolling: touchを削除して、標準のスティッキースクロールを残すことです。助けてください！

IOS5、6、および7で動作する標準クラスの1つの例を次に示します。

.dashboardScroll {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /*MAKES OVERFLOWN OBJECTS HAVE INERTIA SCROLLING*/
    -webkit-transform: translateZ(0px); /*HELPS THE ABOVE WORK IN IOS5*/
}
webkitscrollios8overflowinertia
56
Jamie Beech

IOS 5、6、および7ではうまくスクロールする（非常に複雑な）ネストされたスクロール可能なdivで同様の問題がありましたが、iOS 8.1では断続的にスクロールできませんでした。

私が見つけた解決策は、ブラウザをだましてGPUを使用させるCSSをすべて削除することでした。

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

これにより、「-webkit-overflow-scrolling：touch;」引き続き含めることができ、通常どおり機能します。

上記のハックがiOSの初期の化身で与えたスクロール性能に対する（私にとっては怪しい）利益を犠牲にすることを意味していましたが、それと慣性スクロールの選択では、慣性スクロールがより重要であるとみなされました（サポートしていません） iOS 5）。

この段階では、なぜこの対立が存在するのかを言うことはできません。これらの機能の実装が不適切である可能性がありますが、それを引き起こしているのはCSSの少し深い部分があると思われます。現在、HTML/CSS/JS構成を縮小して作成しようとしていますが、それを実現するには、重いマークアップ構造と大量の動的データが必要な場合があります。

補遺：ただし、この修正を行ってもユーザーがスクロールできない要素でスクロールしようとすると、停止してから1秒待つ必要があることをクライアントに指摘する必要がありましたスクロール可能な要素をスクロールできます。これはネイティブの動作です。

27
Louis Féat

この問題があり、解決策を見つけました。解決策は、ex :(。dashboardScroll> .dashboardScroll-inner）の2つのコンテナーにコンテンツを配置し、このcss3を介して親コンテナー「.dashboardScroll」よりも1px以上内側のコンテナー「.dashboardScroll-inner」を指定する必要があることです。財産

.dashboardScroll-inner { height: calc(100% + 1px);}

これをチェックしてください：

http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/

または、別のコンテナを追加できない場合は、これを使用します：

.dashboardScroll:after { height: calc(100% + 1px);}
9
mohammed Suleiman

Cordova Webアプリでも同じ問題が発生しました。私にとって問題は、アニメーション化され、プロパティ<div>を持った親animation-fill-mode: forwards;を持っていたことです

このプロパティを削除することで問題が解決し、壊れたオーバーフロースクロールが修正されました。

6
clauderic

DOMをバブリングする周囲の要素からのタッチイベントを防ぐことは、別の潜在的な解決策です。周囲のDIV要素がタッチまたはドラッグイベントを受け取ると、スクロールが停止することがあります。この特定の問題は、スムーズにスクロールする必要があるメニューで発生しました。これらのイベントをオフにすると、スクロール可能な要素の「固着」を止めることができました。

$html.bind('touchmove', scrollLock );

var scrollLock = function(e) {
        if( $body.hasClass('menu-open') ){
                e.stopPropagation();
                e.preventDefault();
        }
};

$html.unbind('touchmove', scrollLock );
1
Squiggs.

以前の回答では問題を解決できませんでした。そのため、数時間後、iScrollライブラリに iScroll が試されました。 iOSだけにスクロールを追加するための追加のライブラリ（およびかなり大きい）を含めることは素晴らしいことではありませんが、これは私にとってはうまくいったことです。 READMEに従うだけで、Liteバージョンで十分です。

短所：

  • Androidのスクロールは見た目が悪くなりましたが、もうネイティブではありません。
  • もうスクロールしてページを更新することはできません
  • Androidに別の修正を適用する必要があります。 クリックが機能しない

使用するかどうかはわかりませんが、必要な場合は試してみてください。

1
CapK

ここですべてのソリューションを試してみましたが、成功しませんでした。スクロール可能なdivおよび親コンテナでプロパティ-webkit-overflow-scrolling：touch;を使用することで、機能させることができました。

div.container {
    -webkit-overflow-scrolling: touch;
}

div.container > div.scrollable {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}
1
Gabriel Bull

私もそれでいくつかの問題を抱えていますが、わずかに異なるシナリオで。

Divには問題なく慣性があります。

私はあなたが見てみることができるシンプルなJSFiddleを持っています。

https://jsfiddle.net/SergioM/57f2da87/17/

.scrollable {
    width:100%;
    height:200px;
    -webkit-overflow-scrolling:touch;
    overflow:scroll;
}

それが役に立てば幸い。

0
SergioM

Mohammed Suleimanの答え（.dashboardScroll：after {height：calc（100％+ 1px）;}）で最後のメソッドを使用しましたが、結果はコンテンツの下に100％+ 1pxの空きスペースがありました。 500ms後に高さを1pxに戻すことでこれを修正しました。 glyいですが、動作します。

これはreact.jsアプリであったため、私のコードは次のようになりました。

componentDidUpdate() {
    if (window.navigator.standalone && /* test for iOS */) {
        var self = this;
        setTimeout(function(){
            self.refs.style.innerHTML = "#content::after { height: 1px}";
        }, 500);
    }
}

そしてレンダリング：

render() {
    var style = '';
    if (window.navigator.standalone && /* test for iOS */) {
        style = "#content::after { height: calc(100% + 1px)}";
    }
    return (<div>
                <style type="text/css" ref="style">
                    {style}
                </style>
                <div id="content"></div>
            </div>);
}
0
Dagligleder

angular bootstrapモーダルの使用中にこの問題が発生しました。独自のスタイルシートを作成し、メディアクエリの固定幅とマージンを削除して修正しました。

元の：

  .modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
  }

@media (min-width: 768px) {
  .modal-dialog {
      width: 600px;
      margin: 30px auto;
  }
    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
    .modal-sm {
        width: 300px;
    }
}
@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
    }
}

変更点：

.modal-dialog {
    margin: 0px;
    margin-top: 30px;
    margin-left: 5%;
    margin-right: 5%;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: auto;
        margin-left: 10%;
        margin-right: 10%;
    }
    .modal-content {
       -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
}

@media (min-width: 992px) {
    .modal-dialog {
        width: auto;
        margin-left: 15%;
        margin-right: 15%;
    }  
}
0
Nikki Lehman