И така, инсталирам, рестартирам, и при още при един от първите сайтове, които тествах, попаднах на нов бъг (нов: в смисъл, бъг, който не съм виждал в 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… поне засега.

Microsoft казват, че IE6 е вече история. И че IE9 (който официално излезе днес и може да се ползва от всички потребители с Windows Vista/Windows 7) е много по-добър браузър.

Да видим! :)

Но първо, няколко думи за причините за намаляването на поддръжката за IE6 и две интересни статии.

Причините

Dan Cederholm: How I Might Deal with IE6

Roger Johannson: No more pixel perfectionism in IE 6

Принципно, идеята е следната: Ограничете времето, което отделяте за IE6, до необходимия минимум. Да, дизайнът ще изглежда малко по-различно в този архаичен браузър, но какво толкова? Важното е да работи, и да няма проблеми с достъпността или функционалността.

В определени случаи, може дори да прецените, дали искате да осигурите дори и минимална поддръжка за IE6, или направо да го “отрежете”, по подобен начин, както преди години беше ограничена поддръжката за Netscape 4.7x, с помощта на @import за CSS стиловете.

За IE6, може да ползвате IE conditional comments, примерно:

<!--[if gte IE 7]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="screen.css" />
<!--<![endif]-->

“Преведено” на разбираем език, това малко парченце HTML код значи следното:

Ако Internet Explorer е версия 7 (или по-висока), файлът със CSS стиловете ‘screen.css’ ще се зареди. В противен случай, файлът няма да се зареди (тоест, при IE6 и по-стара версия). Всички останали браузъри (Firefox, Opera, Safari, etc.) ще си заредят нормално файла screen.css. Тествах във Firefox 3, Safari 3.2, IE7, IE6, работи безотказно.

Ето го и тестовия пример

Отворете тази тестова страничка с Firefox, Opera, Safari или IE7+ — фонът на страницата би трябвало да е зелен, тоест, файлът със стиловете ‘screen.css’ се зарежда нормално.

Отворете страничката с IE6 или по-стара версия — фонът на страницата би трябвало да е бял, тоест, файлът със стиловете ‘screen.css’ не се зарежда.

А сега малко за статистиките.

Реших да проверя, какъв процент от посетителите на моя блог ползват Internet Explorer, какъв процент от тях ползват версия 6, и също и как стои въпросът с Firefox и още от няколко от съвременните браузъри, които в момента са популярни.

Точните числа

За сравнение взимам последния месец (22 януари — 22 февруари 2009), и сравнявам също така този период със същия период, но от преди една година (22 януари — 22 февруари 2008).

Firefox (Jan. 22, 2009 — Feb. 22, 2009): 56.18% от всички посещения
Firefox (Jan. 22, 2008 — Feb. 22, 2008): 49.79% от всички посещения
Firefox: +6.39% увеличение на посещенията, в рамките на 1 година

Internet Explorer (Jan. 22, 2009 — Feb. 22, 2009): 33.47% от всички посещения
Internet Explorer (Jan. 22, 2008 — Feb. 22, 2008): 40.90% от всички посещения
Internet Explorer: -7.43% намаляване на посещенията, в рамките на 1 година

Opera в момента е около 5%, Chrome около 3.2% и Safari 1.5%. Всички останали браузъри (Mozilla, например) са с пренебрежимо малки числа, така че не си струва да бъдат споменавани дори.

Тенденцията е ясна. Firefox бавно, но постоянно увеличава своя дял, а Internet Explorer прави точно обратното. Safari, Opera, а отскоро и Chrome, също присъстват в общата картина, но доста по-скромно.

Нека видим и как стои въпросът с версиите на IE.

IE7/IE8 vs. IE6

IE7 (Jan. 22, 2009 — Feb. 22, 2009): 55.22% от дяла на IE в посещенията
IE7 (Jan. 22, 2008 — Feb. 22, 2008): 41.59% от дяла на IE в посещенията
IE7: +13.63% увеличение на посещенията в рамките на 1 година

IE6 (Jan. 22, 2009 — Feb. 22, 2009): 43.64% от дяла на IE в посещенията
IE6 (Jan. 22, 2008 — Feb. 22, 2008): 57.18% от дяла на IE в посещенията
IE6: -13.54% намаляване на посещенията в рамките на 1 година

Тенденцията тук също е ясна: IE6 бавно отстъпва позиции за сметка на IE7, който започва да преобладава.

IE8 Beta също присъства отскоро в статистиките, но доста скромно — около 1%.

The Verdict

Firefox: 56.18% от всички посещения на сайта
Internet Explorer: 33.47% от всички посещения на сайта
— IE7: ~ 55% (от IE дяла)
— IE6: ~ 43% (от IE дяла)

Тоест, в момента посетителите, които използват IE6, са по-малко от 15% от общата цифра. Останалите ползват Firefox, IE7, Safari, Opera и Chrome.

15% твърде малка цифра ли е, за да приложа (хипотетично) “филтриране” на CSS стиловете за IE6? Не, все още е рано.

Но предполагам, че до 1-2 години дялът на IE6 ще намалее дотолкова, че наистина няма да има смисъл човек да се старае да оправя XHTML/CSS кода за него. И тогава IE6 ще влезе в историята, по същия начин, по който Netscape Navigator 4.7x влезе в историята преди няколко години — нещо, което лично на мен ми донесе невъобразимо облекчение тогава! :-)

Проблемът накратко:

Да вземем най-простия пример. Създаваме нов HTML документ, с три контейнера в него: #header, #main, #footer.

За #header-а задаваме следните CSS правила:

#header {
width: 760px;
height: 200px;
margin: 10px auto 0 auto;
padding: 0;
background: #F00 url(header.jpg) top left no-repeat;
}

Дотук всичко добре. Сега нека създадем още едно или две копия на същия html документ, и да ги cross-link’нем. Имаме три html страници, с еднакъв CSS и html.

Сега отваряме и тестваме HTML страницата във Firefox, Opera и Apple Safari. Всичко е наред. Първоначално #header се зарежда с червен цвят на фона, след това се зарежда и background image. При отварянето на някой от другите html файлове, CSS кодът и background-ът на #header са вече кеширани и червеният цвят на фона на #header не се вижда повече.

Не е така в IE. Тествах в IE6, също и в IE7.

При IE зареждането на всяка страница протича така:

Първоначално зареждане на една от страниците: фонът на #header е червен, след това се зарежда картинката за него и страницата придобива завършения си вид (по същия начин протича зареждането на страницата и в Opera, FF, Safari).

След това обаче, ако се отвори някоя от другите тестови страници, се случва следното: IE се опитва първо да покаже червен цвят на фона на #header, и след няколко милисекунди до четвърт от секундата, се “сеща”, че #header има зададена картинка за фон, която вече е кеширана. Получава се нещо като проблясване на цвета на фона, преди да се покаже картинката. Не се получава видимо на всяко зареждане, може би в половината или повече от половината от случаите.

[Естествено, мога да избера друг цвят на фона (бяло или зелено, в този случай) и така проблемът няма да е така явен, но се опитвам да разбера, каква е причината за това странно поведение на IE.]

Подготвих малък test case. Вижте го последователно с Internet Explorer и Firefox!

И ако имате идея, какво предизвиква “проблясването” на цвета на фона под фоновото изображение, ще съм ви много благодарен, ако оставите кратък коментар тук:)

Не че не мога да направя цветовете да пасват на цвета на фоновото изображение. Не че не мога да зарежа IE и да го оставя така. Но просто отвътре ме човърка, защо точно в този (и други подобни) случаи се получава така.

Има ли проблем в HTML кода? В CSS кода? Има ли нещо, което да не знам, което да предизвиква този бъг?

Примерът е твърде прост, разгледайте го. Аз от вчера сутринта си блъскам главата, да разбера, как може този бъг в IE да бъде предотвратен, когато правя нов CSS дизайн и… нищо, засега:(((

Виждал съм много сайтове, които не страдат от подобен проблем под IE7/6. Каква е причината в толкова елементарен случай — header, съдържание на страницата, footer, плюс 3 CSS правила и едно-единствено изображение за фон — в Internet Explorer да се получава “проблясване” (мигане, whatever) на цвета на фона? Защо IE се опитва да покаже първо цвета на фона, и след миг зарежда кешираното изображение за фон?

В случая няма :hover — IE6, например, беше известен с това, че ако има промяна на background при :hover, той се опитваше да “презареди” фоновото изображение, дори и да е кеширано. Но този случай не е такъв…

Heeeeelp! :-)

Time breakdown of modern web design:

Намерих я публикувана тук, има и доста интересно описание за това, какво се е случило, когато картинката заедно с блог поста попаднала на първа страница на digg (и има и похвали за моя хостинг, между другото) :-D

Сега като се замисля, може и да съм виждал същата картинка и в някой от българските блогове, но вече не си спомням… Та ако някой се чувства първооткривател, да не се сърди, нека остави линк в коментар тук, thx:)

…А утре битката с IE ще продължи. Stay tuned! :-)

Похабих около 8-9 часа от моето време, за да се боря с необясним и глупав бъг в Internet Explorer.

Редактирах HTML код, местих DIV-ове като гламав напред-назад, включвах и изключвах правила в CSS файла, тествах, reload-вах, търсих в Google, търсих помощ навсякъде, накрая изтрих почти целия код на дизайна, който бях създал, и… проклетият бъг си остана!

Дизайнът във Firefox 2 си работи, в Opera 9 си работи, в IE6/IE7 — не. Ей-така.

След безкрайно време взиране в монитора, две ултра-силни чаши кафе и цял ден боричкане с идиотския бъг, осъзнах, че съм пропилял цял един ден, пълнейки си главата с глупости, само защото най-богата компания за софтуер е завладяла половината браузърен свят с неадекватни версии на най-популярния браузър ever, а именно, Internet Explorer.

Internet Explorer 7 е също неадекватен, какъвто беше и IE6 през последните години.

Всъщност, Internet Explorer 6 беше доста добър за времето си — а именно, за 2001-ва година, когато се появява на бял свят.

През 2007-ма Internet Explorer 6 беше безнадеждно остарял. И за съжаление, IE7 също е остарял.

Да, IE7 е много по-добър от своя предшественик, но все още има много да наваксва, докато стигне нивото на новия флагман – Mozilla Firefox.

И така, резултатът за днес е:

Internet Explorer:уебдизайнери — 1:0.

Не съм анти-Microsoft. Не съм и анти-IE. Обичам предизвикателството да направя един CSS layout да изглежда добре и почти еднакво във всички съвременни браузъри — IE, Firefox, Opera, Safari… Но си признавам, че днес IE-weird-behaviour нещо ми дойде в повече…

Замислям се, дали да не добавя някъде в HTML-а следния код, заключен в conditional comments:

<!--[if IE]>
<h1>Please, download Firefox, Opera or Safari to view this page...
or live with the current crappy state of the design you probably see
on your screen!</h1>
<![endif]-->

…и да спра да се тормозя:)

И знаете ли, някак ми напомня на “добрите” стари времена, когато дизайнерите ползваха JavaScript за разпознаване по браузър… :-D

Попаднах на новината съвсем случайно – като хвърлих един поглед към новия дизайн на Apple (по случай излизането на пазара на MacOS X Leopard, предполагам), и оттам нямаше как да не кликна на новината Download Apple Safari 3.0 Beta… for Windows!

Internet Explorer повече няма да има версия за MacOS (освен ако от Microsoft не размислят по някое време). Последната беше IE 5.2/Mac и това беше преди векове…

А ето че Apple пуска версия на Safari за Windows!

Свалих си бетата [Safari version 3.0.1 (522.12.2), ако трябва да съм точен] — стана ми любопитно, естествено — нямам достъп до Mac, така че поне за тестването на сайтове под Safari тази версия би ми свършила чудесна работа:)

Три неща правят впечатление веднага:

• Safari под Windows си изглежда като Safari под MacOS;
• някои Win функции не работят (например, не може да се скролва с натиснат скрол (среден бутон) на мишката);
• font rendering’ът изглежда много различен – Windows няма никакво влияние върху изобразяването на шрифтовете – нито ClearType, нито някакъв друг начин на заглаждане (anti-alias) не работят…

…Така че всички шрифтове изглеждат малко по-плътни (по-черни, като bold) и като че ли рисувани с графит. Което е добре – защото сайтовете, разглеждани със Safari 3.0/Win, ще изглеждат (поне на теория) точно както и под Safari 3.0/Mac… и зле – защото според мен ClearType под Windows е много по-добра технология на заглаждане от тази, която видях в Safari 3.0 Beta/Win.

Сравнете сами – ето два скрийншота от 456 Berea Street (“клик” върху тях за оригиналния им размер):

Прави впечатление, че текстът е много по-четлив във Firefox 1.5, отколкото в Safari 3.0. Това, защото Firefox използва ClearType на WindowsXP, а не някакъв собствен начин на заглаждане на шрифтовете.

От друга страна, като CSS дизайнер, само ме радва този факт — ще мога да виждам сайтовете така, както ги виждат потребителите на Safari/Mac! :-)

Питам се обаче, дали само под Windows заглаждането на шрифтовете изглежда не толкова добре, или това просто е бъг в новия Safari browser? Може би някой с Apple Mac може да пролее хвърли светлина върху въпроса (и може би и да се аргументира с един-два скрийншота;-)

Така или иначе, Safari 3.0 скоро ще е достъпен за потребителите на Windows, и от това можем да се възползваме и ние, уебдизайнерите, принудени да се съобразяваме със странностите на толкова много версии на популярните в момента браузъри – IE 7.0, IE 6.0, Firefox 1.5/2.0, Opera 9.x, Safari 2.0/Mac:)

PS Интересна дискусия за Safari 3.0/Win в може да прочетете в сайта на Roger Johansson:)