4

私が現在取り組んでいるプロジェクトでは、非常に奇妙なレンダリングの問題が発生します。最悪の事態は、この問題が完全に自然に発生し、数日間のテストの後、この問題を再現する一連のアクションを見つけることができなかったことです. このバグがどのように見えるかを説明します。ページがどのように見えるかのスクリーンショットを次に示します。

望ましい外観

しかし、これの代わりに、いくつかの操作後にコンテンツ ブロックがポップアップするため、コンテンツの一部のみが表示され、次のようになります。

問題

最も奇妙なことは、このようなブロックの位置が、Web インスペクターによって示される CSS プロパティの値に基づいていないことです。

Web インスペクタ

ご覧のとおり、CSS プロパティは問題ありませんが、ブロックの位置は問題ありません。この事実は、WebKit エンジンのレンダリング バグである可能性があることを示唆しています。

このプロジェクトは Ext JS 3.4 を使用して構築されており、従来の 1 ページの Web アプリケーションです。この問題は、Mac OS 10.7/10.8 上の Chrome および Safari の最新バージョンで見られました。この問題は自然発生的に発生するため、他のブラウザやプラットフォームにも存在する可能性があります。

このような問題をデバッグする方法や、どのように発生する可能性があるかについてのアドバイスは大歓迎です。

4

6 に答える 6

1

コードまたは Ext JS のコードが scrollIntoView メソッドを使用しているかどうかを確認してください。オーバーフローが auto に設定されていない要素で scrollIntoView が呼び出され、相対的に配置されていると思われるクリップされた要素内にある場合に、同様の問題が発生しました。

他のブラウザでは発生しないクリップされた要素をスクロールするため、webkit のバグのようです。

オーバーフローが auto に設定されている同じ階層内の 2 つの要素も表示されます。そして scrollIntoView は間違った要素をスクロールしています。

于 2012-08-28T07:41:24.730 に答える
1

sencha touch 2私はアプリで作業しているときに同じ問題をExtJS経験しました。それは私があなたのための解決策を持っているのと同じであるため、これはおそらくフレームワークのバグであり、これはブラウザがおそらく正しいデータを
入力する前に ExtJS がアプリケーションをレンダリングするときに発生します。ビューポートは正しい幅と高さを取ることができません。これは、イベントのランダム性も説明しています。これは、おそらくリソースが限られていることと応答が遅いことが原因で、モバイルで使用するとより顕著になります. これを処理するために私がとった解決策は良いものではないかもしれませんが、フレームワーク自体の不具合であることを考えると、より良い解決策を見つけることができませんでした 。window.innerWidthwindow.innerHeight

heightwidthウィンドウの正しい高さと幅については、100ms ごとに約 1 秒後にブラウザを変更し、ウィンドウの高さと幅がviewport同じではないことがわかった場合は、それを再調整します。あなたは ExtJS を使用しており、アプリは (携帯電話と比較して) 強力なシステムで実行されるため、より短い間隔をお勧めします。
私が現在使用しているコードは、必要に応じて編集します

var aId = setInterval(function () {
                    if (Ext.Viewport.getWidth() !== window.innerWidth || Ext.Viewport.getHeight() !== window.innerHeight) {
                        Ext.Viewport.setSize(window.innerWidth, window.innerHeight);
                        clearInterval(aId);
                    }
                    num = num + 1;
                    if (num > 10) {
                        clearInterval(aId);
                    }
                }, 100)

launch function私は現在、アプリ内でこのコードを使用しています。ただし、遅延を回避するために間隔時間を可能な限り最小限に抑える必要があるshowイベント内でこれを使用することもできます。 このアプリは、ウィンドウの高さと幅がユーザーによって変更されるデバイスで使用される可能性があると思われる場合 (モバイル ブラウザーの向きが変更された場合や、ユーザーがブラウザー ウィンドウのサイズを変更すると思われる場合など)。ビューポートのサイズが変更されたときにビューポートをポーリングしてサイズ変更するように、ビューポート内に同じコードをコピーして貼り付けるだけです。viewport
heightwidthresize event

于 2012-08-30T20:46:54.543 に答える
1

Mac の Chrome と Safari では、スクロールに問題があります。要素がスクロールされ、コンテンツが変更された場合、コンテンツがスクロールを必要とするほど高くなくても、スクロール位置は保持されます。

私たちのアプリケーションで見つけた回避策は、コンテナー (スクロールがあるコンテナー) のサイズを変更して、スクロールバーが表示されるようにし (そうしないと、スクロール プロパティを操作できなくなります)、スクロールと高さをリセットすることです。

$(container).css('height',1).scrollTop('1').css('height','');

これを jQuery で行う方法を次に示します。ちらつきさえ見えません:)

それが問題なのかどうかはわかりませんが、このことでしばらくの間、私たちは立ち直ることができました。

于 2012-08-28T14:27:25.830 に答える
0

@bjorndコードなしでデバッグするのはかなり難しいです:)

ツールバーは配置されており、コンテンツはURLで呼び出されるIDを持っていますか？言い換えれば、トリガーするリンク（例）はあり#contentますpreventDefault()か？これはおそらくページをスクロールするでしょう。

わからない、これが最初に頭に浮かんだことだった。

また、toolbar（何らかの理由で）クリアされなくなったコンテンツ、または（別の変更/削除された要素と比較して） content'の位置が変更されたコンテンツである可能性もあります。top

最も単純なコードを含むが、それでもバグを引き起こす、簡素化されたテストケースを作成してみてください。あなたがそれを（例えばフィドルなどを通して）投稿すれば、私たちは適切な外観を持つことができます。

于 2012-08-24T08:59:04.120 に答える
0

clear：both;を追加してみましたか。ツールバーdivの後にブロックしますか？

<div style="clear:both;"></div>
于 2012-08-22T08:10:08.983 に答える
0

CSS の問題である可能性があります。

padding-bottom: 99999px;aと を設定して同じ高さの div を使用すると、同様の問題が発生しましたmargin-bottom: -99999px;。これは、ハッシュタグ アンカーを使用してページのさらに div にジャンプする場合を除いて、すべての場合にうまく機能します。<a href="#someDivFurtherOnThePage">Jump down</a>.

その場合、ページの上部が切り取られ、見たかった div から始まりました。

問題を追跡するのはかなり難しいとおっしゃっているので、これは一見の価値があるかもしれません。解決策は、これらの 2 つの CSS 行を削除し、div の高さを設定する別の方法を使用することでした。

于 2012-08-30T20:53:27.667 に答える