私が知る限り、この問題は Firefox に固有のものです。(Win7 Ultimate で FF 4.0.1 を使用しています。)
ランダムな背景画像を表示する必要があるページがあります。小さな php スクリプト (rotate.php) を使用してこのトリックを実行します。したがって、私のcssは基本的に次のようになります。
#main {background-image: url(bg/rotate.php);}
(画像の内容は変更されますが、画像名は変更されないという事実によって Firefox が多少混乱するのではないかと推測しているため、これについて言及します。)
その上に、小さなドットがページの上部から落ちる小さなアニメーション (javascript で作成) があります。アニメーション化された要素 (このドットを含む) は #main 要素 (およびそのランダムな背景画像) を通過します。
問題は、ページを更新するときに Firefox が背景画像を正しく更新しないことです。
Firefox は実際には、前のページ読み込みの背景画像を最初に表示するようで、アニメーションがこの画像上で実行された場合にのみ、Firefox は実際に画像を更新しますが、アニメーション要素で覆われた部分のみを更新します。したがって、結果は両方の画像 (前のページの読み込み、現在のページの読み込み) が混在しています。
ウィンドウのサイズを変更するとき (たとえば、Firebug を開いたり閉じたりすることによって) のみ、Firefox は画像を完全に再描画します (そして、最終的に新しい画像全体を表示します)。
ここで実際の問題を確認できます: http://www.terpsycordes.com/en/home (2 つの異なる画像を続けて取得して問題を確認するには、数回リロードする必要がある場合があり、数回待つ必要があります。アニメーションが開始するまで数秒かかります。) (繰り返しますが、これは Firefox のみのようです。)
この醜い影響を避けるためのアイデアはありますか? 何らかの方法で Firefox に画像を再描画させるトリックはありますか?
前もって感謝します。
編集 ：
DavidJCobb が提供するリンクのおかげで、さまざまな JavaScript トリックを試して、Firefox に背景画像を強制的に再描画させました。結果はまだ完全に満足できるものではありませんが、以前よりは改善されています。テスト中に見つけたものは次のとおりです（これが誰かの助けになることを願っています）：
- 要素 (#main) の不透明度を (わずかでも) 変更するか、透明なアウトラインを指定すると、再描画が強制されます (したがって、新しい画像が完全に表示されます)。
- 適用されたクラスが存在し、要素のいくつかのプロパティ（アウトラインなど）に影響を与える場合、要素のクラスの変更も機能します。
- ただし、ページの読み込み時にすぐに設定すると、この作業はどれも機能しません。再描画が有効になるには、このイベントを発生させる前に約 100 ミリ秒待つ必要があります。
そのため、更新される前の短い間、まだ前の画像が表示されます。誰かがこれを改善する方法についてのヒントを持っているなら、私はそれを聞いてうれしいです.