16

Androidでテストしているヘッダー、テーブル、画像を含む非常に長いテキストを表示するPhoneGapアプリがあります。

スタイルのある要素を除いて、すべて正常に機能しますposition:relative 。これらの要素は、スクロール時に「遅れ」ます。つまり、ページをスクロールすると、これらの要素は約1/4秒後にスクロールを開始および終了します。

このバグは、絶対divを相対的な子と組み合わせ、子を。と組み合わせると発生しoverflow:autoます。これらを削除するとバグは修正されますが、そのままにしておくことをお勧めします。必要に応じて、テーブルを削除して個別に（ダイアログのように）表示したいのですが。

このバグは、標準のAndroidブラウザー（そしてもちろん私のPhoneGapアプリ）でのみ発生します。これまでのところ、次のデバイスでテストしました。

  • サムスンギャラクシーネクサス（4.1.1）
  • サムスンギャラクシーSIII（4.1.2）

どんな助けでもありがたいですが、HTMLと機能が変更されていない（またはあまり変更されていない）ソリューションをお勧めします。

クイックスクロール後

バグを示す最小限の例を作成しました。Androidで開き、スクロールを開始するだけで、すぐに問題が発生するはずです。

<!doctype html>
<html>
<head><meta name="viewport" content="initial-scale=1.0"></head>
<body style="margin:0">

<div style="position:absolute;overflow:auto;top:100px;bottom:100px;width:100%">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a quam arcu. Duis ultrices mollis nibh ut hendrerit. Etiam a interdum metus. Integer volutpat, nibh laoreet euismod suscipit, libero sem iaculis lorem, ut hendrerit magna orci eu elit. Nulla eu ultricies libero. Nulla facilisi. Maecenas nec turpis vitae magna lobortis ornare sit amet ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vestibulum lobortis orci, sit amet ornare dui congue nec. Morbi id magna at turpis auctor ultricies. Ut rhoncus quam augue, ut consectetur risus.</p>
  <div style="position:relative;background:red;">relative box<br>moves slower than the other text</div>
  <p>Fusce congue orci a nunc gravida sed pretium lorem convallis. Etiam hendrerit, ligula eget lobortis vestibulum, arcu sapien pharetra magna, auctor suscipit nisl tellus quis lacus. Cras id elit at ante mollis venenatis. Donec eu sollicitudin odio. Aliquam erat volutpat. Cras et tortor sed mi faucibus sagittis non quis metus. Morbi mauris ante, posuere vel rutrum id, mattis id enim. Morbi purus quam, euismod facilisis blandit quis, commodo at justo. Aliquam in fermentum nibh. Curabitur pharetra blandit risus sit amet tristique. Suspendisse potenti. Curabitur interdum eleifend justo, et dapibus justo volutpat sed.</p>          
  <div style="overflow:auto">
    <table>
      <tr><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
    </table>
  </div>

</div>
</body>
</html>
4

4 に答える 4

33

要するに、あなたが苦しんでいる病気は一般的であり、文書化されています。デスクトップ ブラウザとモバイル ブラウザの両方で、ペイント/リフロー/レンダリングの問題がある、overflow:autoまたは影響を受ける要素。overflow:scrollさらに、モバイル ブラウザー (iOS と Android の両方の Webkit) には、相対要素と絶対要素が「画面外」にある場合にそれらをレンダリングしないという問題があります。これにより、画面上でスクロールするときに遅延が発生する可能性があります。

適用できる「ハック」シムがいくつかあります。

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

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

element > * {
    -webkit-transform: translate3d(0,0,0);
}

あなたのためのいくつかの読書：

そして、どこかからメモにコピーしたスニペットが、ソースを見つけることができません:

特にスクロールに大きく依存しているサイトでは、メイン コンテンツが overflow:scroll に依存していることに気付くかもしれません。このスクロールは GPU で高速化されていないため、ユーザーがスクロールするたびにコンテンツが再描画されるため、これは非常に困難です。このような問題は、通常のページ スクロール (overflow:visible) と position:fixed を使用して回避できます。

于 2013-03-06T17:01:10.183 に答える
2

解決しようとしている問題が 2 つあると思います。下に滑り落ちるテキストと遅れたスクロール速度？

著作権記号で何をしようとしているのかわかりませんが、line-heightより小さい1または1em. 親要素を使用して、そのスパンのスタイルを設定してみてください。おそらくdisplay:inline-block; vertical-align: middle;スパンで使用して、目的の効果を得ることができます。

<p><span>&copy;</span>Some text</p>

スクロールの場合は、何をしているかによって異なります。モバイル ブラウザは、ユーザーがスクロールしているかリンクをクリックしているかをタグが確認する300msのを待ちます。<a>それが関係しているかもしれません。もしそうなら、私はチェックアウトしGoogle FastClickます。

モバイル ブラウザは、本文のページ スクロールを高速化します。したがって、ネストされた div を使用position:absoluteすると、スクロール速度が速くならない可能性があります。の新しいバージョンではAndroid、iOS-webkit-overflow-scrolling: touch を使用できますが、古い携帯電話では何もしません。あなたの例に基づいて、絶対位置を使用しないようにします。これは、スクロールするネストされた div を使用すると、一部のユーザーが div 内で 2 本の指を使用してコンテンツをスクロールする必要があるためです。私もそれを避けて、コンテンツを下に展開するリンクのような、よりモバイルフレンドリーなデザインパターンにデザインを置き換えようとします.

スクロールの問題の多くは、position:fixedモバイルでのサポートを試みているときに明らかになりました。それが原因である可能性があり、それについて読みたい場合: http://bradfrostweb.com/blog/mobile/fixed-position/

于 2013-03-04T06:18:38.023 に答える
1

とを削除position:absoluteしposition:relativeます。これらはこのレイアウトにはまったく必要なく、すべての問題を引き起こしています。

margin-top必要に応じて、体にいくつか追加することができます。

PhoneGapそのようなhtmlガベージを生成します。CSSを細かく制御できることを願っています。

于 2013-03-04T15:42:20.057 に答える
0

実際には、簡単な CSS 修正があり、position:relative段落に追加すると問題が解決します。

これを試して：

<!doctype html>
<html>
<head><meta name="viewport" content="initial-scale=1.0">
<style>
p{ position:relative;}
</style>
</head>
<body style="margin:0">

<div style="position:absolute;overflow:auto;top:100px;bottom:100px;width:100%">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a quam arcu. Duis ultrices mollis nibh ut hendrerit. Etiam a interdum metus. Integer volutpat, nibh laoreet euismod suscipit, libero sem iaculis lorem, ut hendrerit magna orci eu elit. Nulla eu ultricies libero. Nulla facilisi. Maecenas nec turpis vitae magna lobortis ornare sit amet ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vestibulum lobortis orci, sit amet ornare dui congue nec. Morbi id magna at turpis auctor ultricies. Ut rhoncus quam augue, ut consectetur risus.</p>
  <div style="position:relative;background:red;">relative box<br>moves slower than the other text</div>
  <p>Fusce congue orci a nunc gravida sed pretium lorem convallis. Etiam hendrerit, ligula eget lobortis vestibulum, arcu sapien pharetra magna, auctor suscipit nisl tellus quis lacus. Cras id elit at ante mollis venenatis. Donec eu sollicitudin odio. Aliquam erat volutpat. Cras et tortor sed mi faucibus sagittis non quis metus. Morbi mauris ante, posuere vel rutrum id, mattis id enim. Morbi purus quam, euismod facilisis blandit quis, commodo at justo. Aliquam in fermentum nibh. Curabitur pharetra blandit risus sit amet tristique. Suspendisse potenti. Curabitur interdum eleifend justo, et dapibus justo volutpat sed.</p>          
  <div style="overflow:auto">
    <table>
      <tr><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th>    <th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th>    <th>test</th><th>test</th><th>test</th><th>test</th><th>test</th></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td>    <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td>    <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
    </table>
  </div>

</div>
</body>
</html>
于 2013-03-07T08:08:42.550 に答える