0

ページにアニメーション GIF がある場合、IE7 で入力のカーソルがちらつきます。

gif を取り除けば、問題は解決します。

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

私は 10 年の経験を持つ Web アプリ開発者です。信じてください、私はデバッグの方法を知っています。たとえば、アニメーション 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>
4

3 に答える 3

0

同じ問題がありました。アニメーション GIF を削除すると、ちらつきが止まります。

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

オンライン エディターを使用して、必要なサイズの画像のコピーを作成しました。

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

于 2012-09-28T09:45:30.697 に答える
0

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

于 2009-05-21T18:02:05.697 に答える
0

絶対位置に配置されたアニメーション GIF があると言えば十分です。それは ~ 600 x 400 です。別の腹筋の下にあります。透明レイヤーを提供する配置された 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 には一般的なanimated-gif-causes-input-cursor-flickeringバグはないようで、特定のマークアップと CSS に何かが公開されています。そのブラウザの問題。

gif を取り除けば、問題は解決します。

アニメーション GIF が画面描画の理由であるという事実を知っているのは、デバッグが成功した結果です。

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

マークアップや CSS の何が問題を引き起こしているのかを具体的に判断できるようになるまで、一度に 1 つのレイヤーで行っていることを取り除く必要があると思います。

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

于 2009-05-21T19:56:14.703 に答える