2012-09-06 16 views
8

IOSのモバイルアプリをhtml5でビルドします。私は "-webkit-overflow-scrolling:touch"を使用してネイティブの慣性スクロールを取得していますが、非常にバグです。IOS -webkit-overflow-scrollが間違った軸でスクロールするか、まったく表示されない

上下にスクロールしようとすると何も起こりませんが、水平方向にスクロールしようとすると、コンテンツがスクロールしますスクロールが終了するまでレンダリングされないコンテンツの問題を解決しました。垂直方向に(軸から90度ずれて)。私のアプリを回ってページに戻ってくると、時々修正されるでしょう。また、コンテンツがいっぱいであるにもかかわらず、まったくスクロールしないこともあります。

私が検索したところ、Appleはこのバグを認識しており、すぐに修正するつもりはないと思われます。誰でも、正しく動作するように-webkit-overflow-scrollingを取得するソリューションを見つけましたか?

+0

この問題が発生しています。 – wfoster

+0

また同じ問題があります。まだ解像度は見つかりませんでした。 – BishopZ

答えて

6

私はこのバグに数か月苦労しています。私が見つけた最高の特性は以下のとおりです。ページがiFrameを持っているし、内容がJavaScriptから設定されたときにそれが起こることを言う

https://bugs.webkit.org/show_bug.cgi?id=87391

。現在のThe Graphics Codex version 1.6の回避策は、iScroll4を使用してタッチスクロールを使用せずにページを明示的にスクロールすることです。 Javascriptはシングルスレッドなので、アニメーションやバックグラウンドの読み込みコンテンツも実行していると、時間がかかることがあります。

+0

iScroll4も使い終わった。理想的ではありませんが、iOSよりも優れたスクロールをエミュレートすることができました。ヒント:また、transform3dスタイルを0,0,0に設定して、スクロールセクションハードウェアの内容をレンダリングしました。あなたがたくさんのコンテンツを持っていれば、彼らはあらかじめレンダリングされていて、あなたは気になるようなスクロールをしません。 – doubledriscoll

+0

iOSのjQueryダイアログで同じ問題が発生しました。プラグインはすばらしい修正ではなく、やはり少し奇妙な動作をします。 – Jason

2

同じ問題が発生しました。ノードが-webkit-overflow-scrolling: scrollを使用していて、左右スクロールジェスチャで断続的に上下にスクロールすることがありました。ここで

は私が原因であることが判明何:

スクロール可能なノード( source) のいずれかの親に適用
  • 見えるか、そうでなければどこにでもページ上に存在IFRAME、(source
  • visibility: hidden

    しかし、私のウェブアプリケーションにはこれらの状況はありませんでした。私はの::after疑似要素を透明な下敷きを追加するために巧妙なトリックを使用して書いた純粋なCSSモーダルダイアログの内側にスクロール可能な<ul>を持っていました。

    疑似要素からposition: fixedを削除したところ、問題は解決しました。もちろん、これは私の巧妙なトリックを役に立たなくしましたが、この状況でこのバグが引き起こされる可能性があることは興味深いことでした。

    デバイス:2012アプリ3にのiOS 5.1.1(網膜)

    問題のコード:

    /* Underlay */ 
    .dialog::after { 
        z-index: -1; 
        position: fixed; /* <--- This was the problem! */ 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
    
        background-color: rgba(0,0,0,0.4); 
    
        content: ""; 
    } 
    

    TL; DR:含む要素が固定位置擬似を有する場合要素を削除すると、スクロールの問題が解決される可能性があります。

0

問題は古くなっていますが、私のウェブサイトはiOS 5で動作させる必要がありました。残念ながら、iframeを削除したり置き換えたりすることはできませんでした。私はiframeの存在がスムーズにスクロールする要素の前にレンダリングされた場合にのみ問題を引き起こしたことに気付きました。後で文書にiframeを追加する(-webkit-overflow-scroll:touchの要素の後に)問題を修正しました。

関連する問題