След като писах за излизането на новия IE9, си го инсталирах и започнах да тествам как се държат различни видове уеб страници в него. Основно ми беше ми любопитно каква част от новия CSS3 драфт се поддържа от последната версия на Internet Explorer — примерно, rounded corners, box-shadows, text-shadow, gradients, transitions, и т.н.
И така, инсталирам, рестартирам, и при още при един от първите сайтове, които тествах, попаднах на нов бъг (нов: в смисъл, бъг, който не съм виждал в IE8 или IE7): разместване на фона на страницата при определени условия с около 1 пиксел!
Направих тестова страница, на която този бъг може да се възпроизведе лесно:
https://www.optimiced.com/lab/2011/ie9-background-bug/
Тестови условия:
— Internet Explorer 9 (може да се инсталира на Windows Vista или Windows 7).
— Прозорецът на браузъра трябва да е максимизиран.
— Тествал съм с резолюция на екрана 1680×1050, 1440×900.
— Отворете тестовата страница, изчакайте да се зареди изцяло.
— С мишката скролнете до долния край на страницата, после обратно горе към началото. С вероятност 50%/50%, в горната част на страницата ще видите около 1px разместване във фона!
— Ако refresh-нете страницата, бъгът изчезва. Скролнете пак надолу-нагоре (един или няколко пъти), и той пак може да се прояви!
— (update 1) Ако Menu Bar туулбарчето не е отворено в IE9, бъгът не се появява. Ако the Menu Bar е отворено, появява се! (За всеки случай: toolbars open in IE9: Menu bar, Status bar.)
— (update 2) Ако не използвате AERO тема, бъгът не се появява (примерно, ако ползвате Windows Classic тема или Windows 7 Basic). Ако AERO е активирано (Windows 7 тема, с AERO активирано), бъгът се появява! (Благодарско на Adam Kiss, който също направи някои тестове.)
— (update 3) “Show tabs on a separate row” не трябва да е маркирано (то не е маркирано by default, така или иначе). Ако покажете табовете на отделен ред, бъгът също ще спре да се проявява (?).
— Ако увеличите количеството Lorem Ipsum текст в основната колона, бъгът изчезва.
— Ако увеличите (или намалите?) височината на основната колона (#content), в която е текстът, бъгът спира да се появява също. В момента тя е с min-height: 500px.
— Ако минимизирате прозореца на IE9 и после пак се върнете към него, бъгът изчезва (страницата се ре-рендва наново, нормално).
— Разместването се случва само в горната част на фона, при това относително randomly (и като честота на появяване на бъга, и като точно положение на разместването).
Фоновата картинка е приложена към елемента body:
body {
background: #8F8F8F url(../img/body-test.png) 0 0 repeat-x;
}
В кода няма нищо особено, което да предизвика какъвто и да бъг, който да размества с един пиксел изображението.
Лявата половина от този background-image е “истинската” (от оригиналния дизайн), дясната е направена с тестова цел — хоризонталните ивици помагат веднага да се забележи, ако има някакви размествания. Иначе това е оригиналът.
След многобройни опити установих, че размерът на фоновото изображение няма значение, както и форматът (PNG, JPG, GIF и т.н.).
Скролването трябва да се прави с мишка — пробвах и с клавиатура, ако ползвам стрелките нагоре-надолу, мога да възпроизведа бъга също, ако ползвам бутоните page-up/page-down, не мога (?).
Сега, има вариант, разбира се, нещо да не е наред точно при моята версия на Win7/IE9, така че ще съм много благодарен, ако още някой може да потвърди за съществуването на този мистериозен бъг! :-)
Опитах се и да разбера, какво точно го предизвиква, но засега без успех… Отказвам се. Просто виждам, че има бъг, при определени условия — защо се появява, не знам. (Че има проблем в rendering engine-а на новия IE9, то е ясно…)
Същия (или подобен) бъг не съм виждал никога в IE7/8, Firefox, Opera, Safari, Chrome. Само в IE9.
Ето как страницата изглежда нормално:
А така изглежда след едно или две скролвания надолу-нагоре:
Забележете и че в някои случаи, след скролване надолу-нагоре, ако минете с мишката над елементите от втория ред навигация, се появява още една визуална странност…
Тоест: При идеални условия, страницата би трябвало да изглежда така, но след скролване надолу-нагоре, тя изглежда така или така.
* * *
Иначе, IE9 — нищо чак толкова интересно, поне за мен. CSS3 transitions и text-shadow не се поддържат. Border-radius и box-shadow се поддържат — поне това е напредък. Ще тествам още.
И така, ако обичате загадките — сега е момента да ми помогнете да възпроизведа този странен бъг, а също и да споделите идеи, защо се появява! :-)
Аз се предавам. IE9:Michel — 1:0… поне засега.
