Анимированные картинки, вызывающие мерцание ввода в IE - PullRequest
Новая
       33

Анимированные картинки, вызывающие мерцание ввода в IE

0 голосов
/ 21 мая 2009

Курсор на входе мигает с IE7, когда на странице есть анимированный GIF.

Убери gif, и проблема исчезнет.

Изменить (снова): Что мне действительно нужно, так это кто-то, кто знает ответ на странную ошибку, т.е. ошибку.

Я 10-летний опытный разработчик веб-приложений. Поверьте мне, я знаю, как отлаживать, например, зная, что анимированный GIF является причиной рисования экрана, является результатом успешной отладки. Исправление это другое дело.

Отредактируйте (снова, снова), используя мой gif и код из ответа три ниже. 

<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>

Ответы [ 3 ]

0 голосов
/ 21 мая 2009

Достаточно сказать, что у нас есть анимированный GIF абсолютно позиционируется. Это ~ 600 х 400. он сидит под другой абс. позиционируется div, который обеспечивает прозрачность слоя. в заключение сама форма абс. позиционированный за это. 

<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 и не смог увидеть никаких проблем с мерцающим курсором.

Учитывая, что я могу придумать реализацию, которая не демонстрирует проблему, похоже, нет общей ошибки animated-gif-reason-input-cursor-flickering в IE 7, в вашей конкретной разметке и CSS выявляет проблему в этом браузере.

Убери гифку и проблему уходит.

зная, что анимация GIF является причиной для рисования экрана является результатом успешной отладки.

Конечно, добавление анимированного GIF-файла - это последняя часть головоломки, ведущая к тому, что вы видите. Но, как я продемонстрировал, вы можете иметь абсолютно позиционированную форму поверх абсолютно позиционированного анимированного GIF с прозрачным div между ними, и курсор не мерцает.

Я думаю, что вам придется отбрасывать то, что вы делаете, по одному слою за раз, пока вы не сможете точно определить, что именно в вашей разметке или CSS представляет проблему.

Существует еще одна возможность: мерцание, которое вы видите, может быть артефактом вашей видеокарты и / или видеодрайвера. Вы можете попробовать просмотреть страницу в IE 7 на машине с совершенно другим оборудованием, чтобы исключить эту возможность.

0 голосов
/ 28 сентября 2012

У меня была такая же проблема. Удалите анимированный GIF, и мерцание прекратится.

Глядя на CSS, я заметил, что размер изображения был изменен для отображения.

Я создал копию изображения с помощью онлайн-редактора до нужного мне размера.

Переключение анимированного GIF на версию, не требующую изменения размера, решило проблему.

0 голосов
/ 21 мая 2009

Возможно, ваш процессор не справляется с нагрузкой? Это особенно может быть вызвано на старой машине на веб-сайте с интенсивным JavaScript.

...