3

iScroll のカスタム バージョンを含む多数のベンダー ライブラリが付属するカスタム ネイティブ コンテナーで実行される Android および iPhone 用の JQM Web アプリを作成しました。最近、iScroll を含むライブラリをベンダーからアップグレードしました。現在、iPhone ユーザーは特定の条件下で視覚的な歪みが見られます (スクリーンショット: http://i.stack.imgur.com/mCUyB.png )。スクロール後に歪みが修正されます。

症状：

  • 画面右側に横線が引かれている
  • iscroll div の要素が右側を超えて伸びています。(div の左側には丸いエッジがありますが、右側にはありません。これもスクロール後に自動的に修正されます。

これらの両方の条件が満たされると、歪みがトリガーされます。

  • より大きなデータセットをダウンロードした後、より多くの DOM 要素が iscroller にアタッチされる
  • ユーザーが後方に移動したとき。基本的に、JQM ページとその添付要素が非表示から表示に変わるとき。

div iscroll の CSS コード:

element.style {
    -webkit-transition: -webkit-transform 0ms;
    transition: -webkit-transform 0ms;
    -webkit-transform-origin: 0px 0px;
    -webkit-transform: translate3d(0px, -131px, 0px) scale(1);
}

さらにいくつかの観察：

  • iscroll は、以前の iscroll バージョンが -webkit-transform を使用していなかったためだと思われます。
  • iPhone では、-webkit-transform: translate3dハードウェア アクセラレーションです。
  • 歪みは Android ではなく、iPhone でのみ発生します。

他にどのような情報を提供すればよいかわかりません。iscroll のコードを提供することもできますが、800 行のコードです。

これは私の最初の投稿です。穏やかな。

4

1 に答える 1

1

iScroll 5 で、いくつかの項目をスクロールすると画像やテキストが歪むという問題がありました (ブラウザでは正常に動作しますが、iPhone/iPad では失敗します)。

それぞれ1つのスクロールを持つ4つのタブがあります。最初のものは正常に動作しますが (項目が少ないためでしょうか?)、他の項目は最後の項目までスクロールすると失敗します。

いくつかのテストの後、コンテナーの CSS トランジション (iScroll を呼び出すために使用している #id を使用) を削除すると、問題が解決することがわかりました。私はまだトランジションを維持しています。DOM ツリーの別のコンテナーに移動する必要がありました。（私の場合、スクロールの読み込みが終了したときのフェードイン効果でした）。

これは本当に奇妙なバグです...問題の解決にも役立つことを願っています。

于 2014-02-11T16:35:24.517 に答える