Еще раз об Microsoft Internet Explore

Говорят, эволюция выбирает сильных, что же, возможно в природе это и так, но среди браузеров, один «уродец» жив и поныне. Конечно я говорю о Microsoft Internet Explorer, причем от 6 до 8 версии включительно!

С IE 6 все понятно, он давно изжил, его «похоронили» много крупных проектов, но это не мешает ему, хотя и в меньшей степени, жить дальше. Что именно печально, с этим приходится считаться верстая.

К чему это все я. Недавно наткнулся на неприятный баг в своем проекте, где используется много анимации на jQuery. Когда в нормальных браузерах все работало так, как того ожидаешь, в IE 8 оно безбожно тупит. Объекты должны появляться плавно (fadeIn) и друг после друга — появлялись группами по несколько штук, и без всякой анимации. Некоторые элементы вообще отображались только после того, как подвигаешь мышкой (при том, что никакие события на движения мыши у меня не использовались!).

Учитывая, что сам шаблон и первоначальный вариант кода анимации предварительно тестировался в IE, я предположил, что накосячил где-то в логике, когда дописывал дополнительные элементы анимации. Был перелопачен весь код, тем не менее, это не дало никакого результата.

Читая форумы и блоги на данную тематику, наткнулся на интересный блог Алексея, где меня заинтересовал процесс загрузки файлов. В частности, он подробно описывает новые атрибуты форм в HTML5, о  валидации формы и отправке данных аяксом.

Возникла безумная мысль: каким-то образом удалось заблокировать основной цикл обновления интерфейса (mainloop — по аналогии с PyGTK), о чем и написал на одном из JavaScript форумов. Там мне порекомендовали менять opacity для body на незначительный процент, лишь бы обновить данные, отображаемые. Сделать это было практически невозможно, но в результате, подсказка мне помогла.

Баг в IE, при фиксированной позиции блока и применении фильтра opacity.

На самом деле, данный баг проявляется не только в проблемах анимации, сделаем небольшой пример. В блок div применены css стиль:

. Fixed {

position: fixed;

filter: alpha (opacity = 100);

top: 100px;

right: 10px;

width: 200px;

height: 500px;

overflow: auto;

}

Поскольку весь текст в блок не поместился — он содержит полосу прокрутки, но попытка ею воспользоваться в IE 7/8 будет напрасной. Чтобы восстановить нормальную работу, следует убрать фильтр opacity, нажав кнопку Убрать фильтр.

Вот такой примитивный css стиль, в сумме с браузером IE, помог мне провести половину дня на гугление и разнообразные (не нужны) правки кода.

Strange V