IEで入力フリッカーを引き起こすアニメーションgifs

ページにアニメーションgifがある場合、入力内のカーソルがIE7でちらつきます。IEで入力フリッカーを引き起こすアニメーションgifs

gifを取り除くと、問題はなくなります。

編集（再）：本当に必要なのは、奇妙なバグに対する答えを知っている人です。

私は10年間の経験豊富なウェブアプリケーション開発者です。私を信頼して、私はデバッグする方法を知っています。例えば、アニメーションgifがスクリーン描画の理由であることを知っていることは、デバッグに成功した結果です。それを修正することは別の問題です。

私のgifと下の3つのコードを使って編集しなおしてください。

<html> 
    <head> 
     <style type="text/css"> 
      #img { 
       position: absolute; 
      } 
      #dv { 
       background-color: transparent; 
       border: 1px solid Black; 
       height: 450px; 
       position: absolute; 
       width: 600px; 
      } 
      #frm { 
       left: 170px; 
       position: absolute; 
       top: 100px; 
      } 
     </style> 
    </head> 
    <body> 
     <img src="http://www.johnherr.net/skeleton.gif" id="img"> 
     <div id="dv"> 
     </div> 
     <form id="frm"> 
      <input type="text"> 
     </form> 
    </body> 
</html>

出典

2009-05-21 Anonymous

gifのサイズを教えてください。（寸法とファイルサイズ） –

このような問題をデバッグするための第一歩は、その周りのすべてのジャンクを取り除くことです。このプロセス中に作業が開始されると、完了です。そうでない場合は、可能な限り簡単に問題を解決しました。これは、外部のヘルプを求めていなくても、デバッグが行われる限り最良の方法です。 – Brian

おそらく、負荷を処理できないのはあなたのCPUですか？これは特に集中的なjavascriptを実行しているウェブサイト上の古いマシンで発生する可能性があります。

出典

2009-05-21 18:02:05 Malfist

いいえ、そうではありません。マシンは大丈夫です。私はゲーム会社で働いているので、安価なものではないのはCPU、RAM、ビデオカードです:) –

どのように配置しているかのアイデアがあるように、いくつかのHTMLを提供してください。 –

アニメーションGIFが絶対配置されています。それは〜600×400です。それは別のABSの下に座っています。配置されたdiv は透明レイヤーを提供します。最後にフォーム自体はabsです。それ以上のところにが置かれています。

<style type="text/css"> 
#img { 
    position: absolute; 
} 
#dv { 
    background-color: transparent; 
    border: 1px solid Black; 
    height: 450px; 
    position: absolute; 
    width: 600px; 
} 
#frm { 
    left: 170px; 
    position: absolute; 
    top: 100px; 
} 
</style> 
<img src="http://vulcan.wr.usgs.gov/Imgs/Video/MSH/MSH06/MSH06_MOVIE_before_after_from_brutus_10-21_and_10-22-06_animated.gif" id="img"> 
<div id="dv"> 
</div> 
<form id="frm"> 
<input type="text"> 
</form>

私はあなたができるだけ説明したものを複製することを試みました。 IE 6,7,8に上記をロードして、カーソルの点滅の問題を確認できませんでした。

私は問題を示さない実装を考え出すことができることを考えると、IE 7と特定の中に何かに任意の一般的なアニメーションGIF--原因-入力カーソルのちらつきバグがあるようには思えませんマークアップとCSSがそのブラウザで問題を公開しています。

gifを取り除くと、問題がなくなります。

アニメーション gifがスクリーン描画の理由であることを知っているは、デバッグに成功した結果です。

アニメーションGIFを追加することは、あなたが見ているものにつながるパズルの最後の部分です。しかし、私が実証したように、絶対に配置されたアニメーションGIF上に絶対配置されたフォームを置くことができ、それらの間に透明なdivがあり、カーソルがちらつくことはありません。

問題を公開するマークアップやCSSの内容を具体的に判断できるようになるまで、一度に1つのレイヤーを取り除く必要があると思います。

もう1つの可能性があります。表示されるちらつきは、ビデオカードやビデオドライバのアーティファクトかもしれません。この可能性を除外するために、完全に異なるハードウェアを備えたマシン上のIE 7の下のページを見てみてください。

出典

2009-05-21 19:56:14

私はこの試みに感謝しますが、間違っています。あなたの例で使用したアニメーションGIFには低いフレームレートがありました。明らかにするには：私はあなたの例でちらつきを得ていませんでした。私はあなたのコードを変更し、私のイメージを使用し、フリッカーはそこにあります。私はこれを反映するためにオリジナルの投稿を編集しました。私はこの試みに感謝しますが、私の問題は解決せず、元の分析は依然として最高のものです。 –

私は同じ問題がありました。アニメーションGIFを削除すると、フリッカーが停止します。

CSSを見ると、画像が表示用にリサイズされていることに気付きました。

私は必要なサイズにオンラインエディタを使ってイメージのコピーを作成しました。

アニメーションgifをサイズ変更を必要としないバージョンに切り替えると、問題が解決しました。

出典

2012-09-28 09:45:30

質問の画像のサイズが変更されたことをどのように知っていますか？ –

IEで入力フリッカーを引き起こすアニメーションgifs

答えて

関連する問題