javascript - Firefox 17 のレンダリングバグを特定する方法

Question

Firefox 17 (OSX 10.8.2、他の OS はまだテストされていません) でのみ表示されるいくつかの HTML に、興味深い小さなバグがあります。多くのページで繰り返される要素であるテキストを囲む「サイドバー」CSSクラスがあります。1 つのページ (のみ) で、このテキストは、css 可視性プロパティが「hidden」に設定されているかのようにレンダリングされます (表示されませんが、周囲に適切なスペースが残ります)。

ここに画像の説明を入力 ^{Firefox 16.0.2から離れました。右Firefox 17.0.1}

css クラスは次のとおりです。

.sidebar {
      position:fixed; 
      top: 2px;
      left:4px;
      display:table-cell; 
      vertical-align:bottom;
      z-index: 2;
      width: 700px;
      height: 64px;
      -webkit-transform: rotate(90deg) translateX(320px) translateY(340px) scale(1);
      -moz-transform:    rotate(90deg) translateX(320px) translateY(340px) scale(1);
      -o-transform:      rotate(90deg) translateX(320px) translateY(340px) scale(1);
      -ms-transform:     rotate(90deg) translateX(320px) translateY(340px) scale(1);
      transform:         rotate(90deg) translateX(320px) translateY(340px) scale(1);      
}

影響を受ける HTML:

<div class="sidebar" >
    <span class="TMUP1">
        <a href="/">Section_Header</a>
    </span> 
    <span class="sidebarcontents" style="vertical-align: 50%">
        Subsection_Header
    </span>
</div>

サイトのすべてのページには、同一の Google アナリティクス非同期トラッキング JavaScript が含まれています。このコードを削除すると、バグは消えます。コードを確認しましたが、正しいです。サイト内のすべてのページと他のすべてのページで使用され、同じ html (繰り返しヘッダー) が正常にレンダリングされます

Google js コード:

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-000000-0']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

このバグは
、Firefox 16 (同じユーザー設定とプラグイン)、またはその他のブラウザーで表示された次の条件のいずれかで消えます。
- Firefox 17 / セーフモードで表示
- Google アナリティクスコードを削除
- 「サイドバー」クラスの CSS から次の行を置き換えます

 -moz-transform:    rotate(90deg) translateX(320px) translateY(340px) scale(1);

と

 -moz-transform:    translateX(320px) translateY(340px) scale(1);

（つまり、回転を削除します）

プラグインやアドオンとは関係ありません。これらすべてを手動で無効にした場合でも、バグは明らかです。

同じ HTML、同じ CSS、同じ Google アナリティクスコードを持つ他のページは正常にレンダリングされます。

問題のページはサイトで最大のもので (約 160 個の小さな画像を含む最適化された /gzip 圧縮された html が最大 10 KB / 読み込みに 880 KB)、他のすべてのページは小さくなっています。

体はほぼ完全にこの要素の 160 回の繰り返しで構成されています

<div class= "outerDiv" style="background-color:transparent">
<div class="innerDiv">
    <a href='/artists/artist_name/'>
    <img src="/artists/artist_name/_portrait/artist_portrait.jpg" alt="" width="150" />
    </a>
<div class="short_caption">
    <a href='/artists/artist_name/' style="color:white">artist_name</a>
<br />artist_location
</div></div></div>

これらの要素の数を大幅に削減すると、バグも修正されます。

バグをさらに特定/修正する方法はありますか? 現時点では、分析を犠牲にするか、サイトを再設計する必要があるように思われますが、どちらも少し過剰に思えます。

アップデート

いろいろ調べた結果、ここまでたどり着きました。

Google JavaScript とは関係ありません。どんなスクリプトでも、空のスクリプトでも<script></script>バグが発生します。
リンクされたスタイルシートから引き込まれた @font-face でカスタムフォントを使用しています。
- システムフォントのみを使用すると、バグはなくなります。
- @font-face ルールをリンクされたスタイルシートからページヘッダーに移動すると、バグがより回復しやすくなります: スクリプトタグの存在に関係なく表示されます。
ハードウェアアクセラレーションをオフにすると、バグが消えます。
変換から回転を削除すると、バグは消えます。
ページサイズを (160 枚から約 10 枚に) 減らすと、バグは消えます。
Firefox nightly (v20) ではバグが表示されないため、原因が何であれ、v17.0.1 以降の将来のバージョンで修正されます。

問題を示すいくつかのサンプルページを次に示します (元の質問ではリンクを避けていましたが、ここではリンクが少し嫌われていると思います)。バグの影響を正確に測定するには、ページビューごとにブラウザのキャッシュを空にする必要があります。

オリジナルページバグあり
テストページにバグあり
- バグを分離するために単純化された html と最小化された css
- JavaScript はありませんが、空の<script></script>タグが 1 つあります

これらのサンプルはすべて、テストページから派生したものです。

<script></script>タグが削除されましたバグがありません
変換バグから回転を削除
ページサイズが 160 から 18 画像に縮小されましたバグがありません
カスタムフォントのバグがない
カスタムフォントのバグが存在する内部スタイルシート
- これは奇妙なものです。@font_face スタイルシートが外部の場合、バグは<script></script>タグが存在する場合にのみ表示されます。@font_face ルールが内部スタイルシートに移動された場合、バグは<script></script>タグがないことでも明らかです。

1 つのブラウザーの 1 つのバージョンに対して少し OTT のように見えるサイトを再設計しなければならない程度にページのデザインを変更しない限り、バグを排除することはできないようです。より実用的な回避策を期待しています。jQueryブラウザのスニッフィングを使用してみましたが、javascriptがバグを導入しているように見えるため、これはスターターではありません。

更新 2

今、別のマシンでテストする機会がありましたが、バグが現れることはめったにありません。元のマシンで新しいユーザーとしてテストしても、バグはまったく表示されません。したがって、これは明らかにユーザー設定に関係するものであり、できればかなりまれです。

更新 3

@Boris の提案に従って、インクリメンタルローテーションを試みて、ページがどこでどのように分割されているかを確認しました。回転(0度)から80度くらいまでは問題なく、その後バラバラになります。問題を特定するために、すべての要素に 1 ピクセルの境界線を追加しました...

0 ～ 90 度を示すサンプルページ(自動更新で次から次へとバウンスする必要があります)。
これは-moz-transformFirefox で見るだけの価値があるので使用しています。
アニメーション: これは、Firefox 17.0.1 で取得した結果です。

更新 4

@arttronics からのいくつかの提案への回答 - これは3D Firefox ビューで、それがどのように積み上げられるべきかを示しています (3D ビューに切り替えると、Firefox が正しいことをしようと少しだけ頑張っているかのように、バグが消えます)。

3D ビューに表示される突出したコンテンツはテキストの配置用であり、バグには影響しません -このカットダウンバージョンを参照してください。
ズームはリセットされ、変更はありません。
新しいユーザープロファイルは同じ動作を示します。

更新 5 – Firefox のリセット

Firefox のリセットを実行した後 (@arttronics の回答に従って)、バグはまだ残っていますが、おそらく回復力は少し劣ります。

リセットする前に、これはバグを引き起こします-
キャッシュをクリアし
ます-ページを更新します

リセット後、キャッシュをクリアして更新すると、約 50% の確率でバグが発生します。キャッシュをクリアすると、Firefox を再起動し、ページに戻ります。

わかりました私は自分の質問に答えます...解決策は見つかりませんでしたが、スタックオーバーフローコミュニティの関心と驚くべき努力のおかげで、それはかなり明確に思えます...

これは、私のユーザー設定の特殊性を超えて再現するのが非常に難しい問題である可能性があります
これは、Firefox 17.0.1 でのみ現れる不明瞭なバグであり、Firefox 18 で修正されたようです。
サイトの再設計を伴わない回避策はありません

したがって、他の問題に進むために、この質問を休ませることをお勧めします! コメントや提案をしてくれたすべての人に感謝します。とても勉強になるプロセスでした。

score 3 · Accepted Answer

Firefox をリセットする

詳細な質問とその結果のコメントに基づいて、この特定のバグは特定の条件下でのみ固有のものです (新しい OS ユーザープロファイルには問題がなく、新しい Firefox ユーザープロファイルには問題があります)。

次に、Firefoxをリセットします。これらの簡単な手順に従うだけで、v17.0.1 は正常に戻るはずです。Firefox のインストールに複数のプロファイルがある場合は、代わりに次の他の手順に従ってください。

注: リセット機能を使用すると、ブックマーク、閲覧履歴、パスワード、Cookie、および Web フォームの自動入力情報が保存されます。ただし、拡張機能とテーマは削除されます。開いているタブ、ウィンドウ、およびタブグループは保存されません。設定がリセットされます。

編集：先日書いた私のコメントによると：

現時点では、このロゴの陥没問題が発生しているという回答はまだ見られませんが、少なくとも Firefox 18 の ETA は、このコメントの時点で 3 週間後です。

そうは言っても、解決策はFirefox 18がリリースされるまで待つことかもしれません.

javascript - Firefox 17 のレンダリング バグを特定する方法

1 に答える 1

Related

Reference

javascript - Firefox 17 のレンダリングバグを特定する方法