問題タブ [reflow]

iPad 用の HTML5 アプリで作業しています。要素ハードウェアの高さを変更したいと思います。

子要素 (絶対に配置され、親よりも大きい) にビューポート (親、オーバーフロー:非表示) を作成しました。ビューポートの高さを拡張すると、子要素の大部分が表示されます。

アニメーションは、私のデスクトップ ブラウザ (Chrome) では非常にきれいに見えますが、iPad (iOS 6) で実行すると、アニメーションはあまりスムーズではありません。

次の JSFiddle は問題を示しています。

http://jsfiddle.net/schade/bqsnS/ (iPad を使用して問題を確認し、Chrome を使用して動作を確認してください)

私はiPadをデバッグしましたが、私の結論はそれが多くのリフローを行うということです.今のところ、私の結論は、子の位置をどのように設定しても、親要素の高さを変更すると常にiPadで子要素の再描画が強制されるということです.要素。または？

誰かがこれを修正していますか？

または、ある種の優れた回避策はありますか？

最新のブラウザでレイアウトの変更をリッスンするためのテクニックは何ですか? window.resizeコンテンツの変更がリフローを引き起こしたときではなく、ウィンドウ全体のサイズが変更されたときにのみ起動するため、機能しません。

具体的には、次の場合にお知らせください。

• 要素の使用可能な幅が変わります。
• 要素のインフローの子によって消費される合計の高さが変化します。

独自の小さなフローベースのレイアウト エンジンを実装しようとしています。HTML レイアウトの動作を模倣する必要がありますが、DOM 部分ではなくレンダリング ツリーのみを模倣する必要があります。render-tree の要素の基本クラスは Nodeclass です。それは持っています：

• DOM 内の要素へのリンク (そのライブラリでレンダリング ツリーを構築するもの用)
• その親への参照 (ContainerNodeインスタンスまたは None です。後述)
• layouting-options への参照
• X、Y、幅、高さ ( でlayout()サイズが計算された後、で位置が計算されcompute_size()ます。位置はlayout()親のメソッドで定義されますが、サイズはオプション リファレンスで定義されます)。

その方法は次のとおりです。

• reflow()呼び出しcompute_size()とlayout()
• compute_size()これは、ノードの幅と高さを計算するためのものです。
• layout()これは、ノード自体ではなく、ノードのサブノードを配置するためのものです。
• paint()これは、ライブラリのユーザーが上書きするためにあります。

このContainerNodeクラスは、サブノードの処理を実装しています。add_node()これは、渡されたノードをコンテナの子に追加する という新しいメソッドを提供します。forceが True に設定されている場合を除いて、コンテナは渡されたノードを拒否できるため、関数はデフォルトで False に設定されているパラメータforceも受け入れます。

これら 2 つのクラスは、レイアウト アルゴリズムを実装していません。私の目的は、さまざまなタイプのレイアウト用にさまざまなクラスを作成することでした (CSS では、主にdisplay属性によって定義されます)。昨夜、テキスト レイアウトでいくつかのテストを行いました。私のコードは、pastebin.com (pygame が必要) で見つけることができます。これを Python スクリプト ファイルに保存して、次のように呼び出すことができます。

注: コードは本当にくだらないものです。嘘の深い誤解についてのコメントに感謝します。

上記のコードのクラスInlineNodeRowは、属性に似たレイアウトのノードをdisplay:inline( と組み合わせてNodeBox) 実装する方法についての私の考えを実際に表しています。

問題 1 - インライン テキストのマージンとパディング

ライブラリでの現在のアプローチに戻ると、テキストの 1 つの単語も 1 つのノードとして表されます (上記のコードのように)。<span>しかし、タグのマージンとパディングについて 2 つのことに気付きました。

1. マージンが設定されている場合、水平マージンのみが考慮され、垂直マージンは無視されます。
2. パディングが親コンテナーをオーバーフローしており、スパン ノードを「移動」していません。

http://jsfiddle.net/CeRkT/1/を参照してください。

ここに問題があります。 のサイズを計算したい場合InlineNodeBox、テキストノードにそのサイズを尋ね、それをノードのサイズに追加します。ただし、テキストノードのサイズにはマージンとパディングが含まれており、HTML レンダラーの配置には含まれていません。したがって、次のコードは正しくありません。

node.wマージンとパディングが含まれます。TextNode私が目にする次の問題は、テキストノードを正しくレイアウトするために、単語ごとに単一の s に分割したかったのですが、マージンとパディングはこれらすべてのノードに適用され、HTML のマージンとパディングは<span>タグのみです。

各単語を個別のノードに入れるという現在の考えは理想的ではないと思います。ブラウザがレンダーツリーを構築する方法、またはより良いアイデアはありますか?

問題 2 - 単語が長すぎます。次の行に入れます。

このクラスは現在、1 行InlineNodeBoxのみを編成しています。上記のコード例では、前者がノードの受け入れを拒否した (つまり、収まらなかった) ときに、新しいfromを作成しました。レンダー ツリーを最初から再構築したくないので、現在のアプローチではこれを行うことはできません。ノードが一度受け入れられたが、次のリフローで超えた場合、次の行に単語を適切に配置するにはどうすればよいですか (クラスがノードの単一行のみを編成するという考えを保持していると仮定します)。InlineNodeBoxNodeBoxInlineNodeBoxInlineNodeBox

これがすべて理にかなっていることを本当に願っています。私のコンセプトがわからない場合は、お気軽にお尋ねください。また、他の概念、リソースへのリンク、ドキュメント、出版物などに対する批判やアイデアにも非常にオープンです。

反応時間の研究（興味がある場合はこの質問も参照）については、画像の表示時間を制御および測定したいと考えています。さまざまなユーザーのマシンで再描画するために必要な時間を考慮したいと思います。

編集：元々、タイミングにはインライン実行のみを使用していましたが、ペイントに時間がかかるため、ユーザーの画面に表示されている画像の長さを正確に測定することは信頼できないと思いました。

その後、イベント「MozAfterPaint」を見つけました。ユーザーのコンピューターで実行するには構成を変更する必要があり、対応するWebkitAfterPaintはそれを行いませんでした。つまり、ユーザーのコンピューターでは使用できませんが、自分でテストするために使用しました。関連するコードスニペットと以下のテストの結果を貼り付けました。ChromeのSpeedTracer
で 結果を手動で確認しました。

MozAfterPaintとインライン実行を使用して測定された期間を比較した結果。

これは私をあまり幸せにしません。まず、表示時間の中央値は、私が望むよりも約30ミリ秒短くなっています。次に、MozAfterPaintを使用した場合の差異はかなり大きい（インライン実行の場合よりも大きい）ため、setTimeoutを30ms増やして単純に調整することはできません。第三に、これは私のかなり高速なコンピューター上にあり、他のコンピューターの結果はもっと悪いかもしれません。

SpeedTracerの結果

これらはより良かった。画像が表示される時間は、通常、意図した期間の4（場合によっては）10ミリ秒以内でした。また、ChromeがsetTimeout通話で再描画に必要な時間を占めているように見えました（したがって、画像を再描画する必要がある場合、通話間に504ミリ秒の差がありました）。残念ながら、SpeedTracerはコンソールにログを記録するだけなので、多くの試行の結果を分析してプロットすることができませんでした。SpeedTracerとMozAfterPaintの不一致が、2つのブラウザーの違いを反映しているか、MozAfterPaintの使用法に欠けているものを反映しているかはわかりません（SpeedTracerの出力を正しく解釈したと確信しています）。

質問

知りたい

1. ユーザーのマシンに実際に表示された時間を測定したり、少なくとも、さまざまなテスト用コンピューター（Chrome、Firefox、Safari）のさまざまなブラウザーのセットで同等の数値を取得したりするにはどうすればよいですか？
2. レンダリングとペイントの時間をオフセットして、実際の可視性が500ミリ秒になるようにすることはできますか？ユニバーサルオフセットに依存する必要がある場合、それは悪いことですが、ユーザーがやや遅いコンピューターで意識的に画像を見ることができないほど短時間で画像を表示するよりも優れています。
3. を使用しますsetTimeout。私は知ってrequestAnimationFrameいますが、それを使用してもメリットが得られないようです
   。調査は調査期間全体にわたって焦点が当てられていると想定されており、特定の値よりも+/-500ミリ秒の表示を取得することが重要です。 fpsの数。私の理解は正しいですか？

明らかに、Javascriptはこれには理想的ではありませんが、私たちの目的にとっては最も悪いことではありません（調査はユーザー自身のコンピューターでオンラインで実行する必要があり、何かをインストールするように依頼すると怖がります。JavaはMacOSXブラウザーにバンドルされていませんもう）。
現時点では、現在のバージョンのSafari、Chrome、Firefox、およびおそらくMSIE（performance.nowおよびフルスクリーンAPIの機能検出、MSIEの機能はまだ確認していません）のみを許可しています。

まず、WebViewをスクロールできるようにしたいのですが、スクロールによってWebViewが画面に合わせてレイアウトを再配置しないように、画像のように動作する必要があります。ページが画面よりも実際に大きい場合は、スクロールバーを提供する必要があります。

ズーム中にAndroidWebViewがコンテンツをラップしないようにする方法を読みましたか？。ダブルタップ以外は動作します。

問題を再現するには、
次の手順に従います。1.テキストでいっぱいのWebページをフルスクリーンWebViewにロードします。
2.画面の右側をダブルタップします。<-ここではズームインするだけです。問題ありません。3
。画面の左側をダブルタップします。

問題が発生します。テキストが再配置されます。元の縮尺にズームバックしたとき。テキストは画面の半分に表示されます。

何が起こっていても、webViewを停止してレイアウトを再配置するにはどうすればよいですか？

幅200pxのサイドバーがあり、その中に配置したFacebookの「いいね」ボタンがDIVの境界の外側で実行されています。Likeボックスのテキストで200pxのマークを認識し、必要に応じて新しい行にリフローするための回避策はありますか？

私はこのコードで作業しています：http：//jsfiddle.net/tKkpm/2/

と を使用して、要素のリストを表示する GWT アプリケーションを作成してCellListいListDataProviderます。各セルに表示したいデータは、2 つの文字列のみで構成されています。から拡張するカスタム セルを作成しましたAbstractCell。カスタム セルを作成するには、UIBinder を使用し、HTML に基づいて UI を作成しました。各セルには、2 つの文字列とボタンが含まれています。ボタンをクリックすると、バインドされたリストから要素が削除されます。私の解像度では、約 20 個の要素が表示されるので、ページ サイズを 30 に設定して、ユーザーが下にスクロールしたいときに少し「バッファー」を持たせます。最初の 3 つの要素は次のようになります。

http://imageshack.us/f/201/listox.png/

デプロイされたアプリケーションを tomcat で実行しても問題ありません。しかし、開発モードで実行すると、要素を削除しているときに次の問題に気付きました:

• 最初の要素の「要素を削除」ボタンをクリックします
• 最初の要素の [要素の削除] ボタンをもう一度クリックします (最初の要素がまだ表示されている間)。
• 最初の要素がリストから削除されます
• 2 番目の要素もリストから削除されます

デプロイされたバージョンで同じことを試みましたが、最初の要素の「要素の削除」ボタンを 2 回クリックすることができませんでした。削除が速すぎたからです。そのため、表示される要素の量を 500 に増やしましたが、同じ問題が発生しました。低速のシステム (1 GHz の AMD G-T40R) に切り替えたところ、ページ サイズを 50 以上に設定しても同じことが起こりました。

この問題をさらに掘り下げるために、カスタム Cellのメソッドにビアを追加しNativePreviewHandlerてスケジュールし、何が起こっているかを確認しました。結果は次のとおりです (開発モード、Chrome 27.0.1438.7 dev-m で実行、順序を確認するためのタイムスタンプを追加):ScheduleCommandScheduler.get().scheduleDeferredonBrowserEvent

• at 1363340977109 mousedown (最初の要素の「要素の削除」ボタン上)
• at 1363340977206 mouseup (最初の要素の「要素の削除」ボタン上)

• 1363340977225 でクリックします (最初の要素の [要素の削除] ボタンをクリックします)。

• 1363340981341 でスケジュール onBrowserEvent で延期

• at 1363340981366 mousedown (最初のクリックと同じ位置ですが、最初の要素が削除されたため、2 番目の要素の [要素の削除] ボタン)

• at 1363340981386 mouseup (2 番目の要素の [要素の削除] ボタン上)

• 1363340981394 でクリックします (2 番目の要素の [要素の削除] ボタンをクリックします)。

• 1363340985184 でスケジュール onBrowserEvent で延期

ここでの質問:ブラウザがコンテンツのレンダリング/(再) 描画でビジーであるため、2 回目のクリックが何らかの形で「バッファリング」されるというのは本当ですか。レンダリングがいつ完了したかを判断する方法や、ブラウザがビジー状態のときにユーザー入力を無効にする方法はありますか?

私の現在の解決策/回避策:要素が削除されたときにボタンを無効にします。したがって、クリックは無視されます。ブラウザがレンダリングを終了したことをエミュレートするために、実行後に一定の時間 (~50ms) を追加しましたScheduleCommand。次に、すべてのボタンを再度有効にします。これは今のところ機能しますが、いつかブラウザが入力を 50 ミリ秒以上バッファリングすると、問題が再び発生します。

そこで、Bootstrap Carousel を使用して単純なスライダーを作成していますが、問題は、トランジションが初めて発生したときに各スライドのペイント時間が長くかかることですが、その後は問題ないように見えます。私の推測では最初のトランジションがリフローを引き起こしていること、これがリフローが発生する理由ですが、確かではありません。

これは、Chrome Dev Tools に表示されるものです

また、これはカルーセルへのリンクです: http://dev.around25.net/inzimo/#/weddings

これを修正するための提案をいただければ幸いです。ありがとう。