IE9 background shifting bug

След като писах за излизането на новия IE9, си го инсталирах и започнах да тествам как се държат различни видове уеб страници в него. Основно ми беше ми любопитно каква част от новия CSS3 драфт се поддържа от последната версия на Internet Explorer — примерно, rounded corners, box-shadows, text-shadow, gradients, transitions, и т.н.

И така, инсталирам, рестартирам, и при още при един от първите сайтове, които тествах, попаднах на нов бъг (нов: в смисъл, бъг, който не съм виждал в IE8 или IE7): разместване на фона на страницата при определени условия с около 1 пиксел!

Направих тестова страница, на която този бъг може да се възпроизведе лесно:

http://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… поне засега.

9 comments |



Comments to “IE9 background shifting bug”:

  1. Гонзо Says:
    1

    Пробвах в IE9 на Windows 7, работещ във виртуална машина (VirtualBox на Ubuntu 10.10) и при мен бъг няма. Дали е възможно проблемът да се дължи на хардуерното ускорение на IE9 плюс комбинация драйвери, графична платка?

  2. Сашо Says:
    2

    И аз не мога да го репродуцирам (Windows 7 x64 на ThinkPad T410). Звучи ми като артефакт от видеодрайвер..

  3. Michel Says:
    3

    @Гонзо, @Сашо:

    Не мисля, че проблемът е от дефектни видеодрайвери…

    Също и самият бъг се появява при много специфични условия.

    Например, сега тествах на големия монитор, 1680×1050 (22″). Намалих резолюцията на 1280×800, и не успях да възпроизведа същия бъг! Върнах резолюцията на 1680×1050, и пак мога да го възпроизведа.

    С какви монитори сте? (Като резолюция?)

  4. Гонзо Says:
    4

    1280×1024 Мога да си пренеса виртуалната машина вкъщи и да пробвам на големия монитор, който е 1680×1050.

  5. Сашо Says:
    5

    1440х900. Пробвах и на х200, пак същата резолюция, но с Интел видео – пак не го виждам. ти успял ли си да го репродуцираш на различен хардуер?

  6. Michel Says:
    6

    @Гонзо:

    Мерси! :)

    @Сашо:

    Успях да видя бъга точно на монитор на ThinkPad T410i 1440×900 и после и на външен монитор 1680×1050. Видеото е nVidia NVS3100M, драйверите са последните. Много странно…

    Дет се вика, “да не би повредата да е във вашия телевизор”? :-D Всичко е възможно, точно затова се опитвам да разбера, защо виждам разместването, точно в IE9…

    Но не мисля, че е драйвер — най-малкото, разместването нямаше да се вижда и на скрийншотите. А и го виждам в IE9, как самите елементи се разместват.

  7. Сашо Says:
    7

    Мишел, пусни репорт – от Settings | Send feedback. Можеш да добавиш скрийншоти през PSR, има бутон на формата

  8. Michel Says:
    8

    @Сашо:

    Може, може… :)

  9. Michel Says:
    9

    Btw, още едно условие: Menu Bar туулбарчето трябва да е отворено, иначе бъгът не се появява! Супер-странно, нали? При вас беше ли отворен Menu Bar?

    Също така, Windows AERO трябва да е активирано — ако ползвате Win7 Classic тема или Win7 Basic тема, бъгът също няма да се появи…

    Един друг дизайнер успя да възпроизведе бъга също, преди малко. Аз пък успях на друга машина (монитор: 1920×1080, Win7 с AERO, IE9) да възпроизведа същия бъг, като заредих тестовата страница в IE9 и просто ползвах стрелките нагоре-надолу на клавиатурата (IE9 с отворени Menu bar, Status bar), бъгът се появяваше в 100% от случаите!

    Now: Question is: Какво го предизвиква? :-)

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Your e-mаil address will never be showed.


[ optimiced.com е виртуалният дом на Мишел, уеб/графичен дизайнер от слънчева прашна София | powered by WP & DreamHost | also available in English ]

0.583 / 36 / 19.5