2

概要：

私はクライアント用のモバイル Web アプリケーションを開発してきましたが、Android の更新によってすべてが台無しになるように見えるまで、すべてが順調に進んでいました。ウィンドウ/ボディ (DOM 要素) の高さが実際の画面の高さよりもはるかに小さいかのように、Web ページがレンダリングされるようになりました。この理論の理由は、ページが絶対配置要素を中心に構築されているため、要素bottom: 0はページの下部に配置する必要があるためです (親が相対的でない場合はもちろん、そうではありません)。

この問題は、デバイスが特定のバージョンの WebKit を使用している場合にのみ発生するようです (これまでのところ、この問題は Android デバイスでのみ発見されています)。より具体的には、バージョン 534.13 から 534.30 の間 (以下のデバッグ セクションを参照)

レイアウトについて:

このサイトでは、絶対配置要素を使用して、ヘッダーとフッターのコンテンツを画面の上部と下部に添付しています。jQuery(window).load() イベントを使用して、要素をそれぞれに対して正しく配置するために数値を計算bottomします。top

このウェブサイトが完璧ではないことは承知しています。言うまでもありません (私はモバイル向けに最適化されたウェブサイトは初めてで、疑問を抱くことなく彼のアイデアに賛成しました)。

http://v-tone.com/で現在の実装を参照してください(注: この問題は、Web サイトの訪問や個人的な利益のためのものではありません。また、ページはいつでも変更される可能性があります)

問題：

問題は、動作する例と動作しない例を示すことで最もよく説明できます。

作業: http://www.kjetil-hartveit.com/_misc/vtone/working.jpg

動作していません: http://www.kjetil-hartveit.com/_misc/vtone/notworking.jpg

ご覧のとおり、実装は Android 2.2 では機能しますが、新しい 4.0.3 では機能しません。

デバッグ:

私は jsconsole.com (リモート デバッグ) とコンソール ロギングなどを使用してデバッグしてきましたが、動作中のサイトとレンダリングされたサイトのサイズと計算に大きな違いは見つかりませんでした。

また、問題を特定するために、webkit や他のレンダリング エンジンを使用していくつかの異なる実装をテストしました。結果は、WebKit バージョン534.13と534.30の間にバグがある可能性があることを示しています。

ここですべてのテストデータを確認できます: http://www.kjetil-hartveit.com/_misc/vtone/Render%20comparison.xlsx (このリンクはいつでも存在しなくなる可能性があることに注意してください)

解決？

私のクライアントは、できるだけ早くサイトを立ち上げたいと思っています。私もそうです。Android のアップデートを待つ価値があるかどうかはわかりません。

  • 問題の簡単な修正方法を知っている人はいますか?
  • 誰でもそれがWebKitの問題であることを確認できますか?
  • 他の提案？
4

1 に答える 1

3

Android OS を搭載した Samsung Galaxy S3 の WebKit 534.30 でも同じ問題が発生しました。

CSS3でアコーディオンメニューを作ってみました。

<div class="wrapper">
 <ul class="accordion">
  <li>
   <button>Button Caption</button>
   <div>
    <p>Some Information</p>
   </div>
  </li>
 </ul>
 <footer>Some information in footer</footer>
</div>

ボタンをタップすると、純粋な JavaScript を使用して li 要素の高さが変更されます (= ボタンの高さ + div の高さ)。問題は、開いた li 要素がフッター要素のコンテンツと重なっていたことです。

私が行った解決策は、translate3d と scale(1) をすべてのインタラクティブな要素に追加することでした。

.wrapper {
 -webkit-transform: translate3d(0, 0, 0);
 -webkit-transform: scale(1);
}
.accordion > li {
 -webkit-transform: translate3d(0, 0, 0);
 -webkit-transform: scale(1);
}
.accordion > li > button {
 -webkit-transform: translate3d(0, 0, 0);
 -webkit-transform: scale(1);
}

その後、webkit 534.30 でもアコーディオン メニューが正常に動作するようになりました。

于 2012-09-10T12:42:40.907 に答える