IE9 background shifting bug

След като писах за излизането на новия 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… поне засега.

IE6-IE9: 10 години

10 години не са малко. IE6 беше един от най-добрите браузъри за времето си (2000-2001 година). След това започна да се превръща малко по малко в спирачка за развитието на Web — докато останалите браузъри се развиваха с бързи темпове, IE6 си оставаше непроменен. И така, докато IE7 се появи. После IE8. Време е за нова промяна…

IE6-7-8-...9!

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

Да видим! :)

Наближава ли залезът на IE6?

В светлината на идеите в последно време уеб дизайнерите да се занимават с Internet Explorer 6 все по-малко и по-малко (все пак, този браузър е вече на почти 10 години!), ми беше любопитно да сравня малко статистики в моя сайт.

Но първо, няколко думи за причините за намаляването на поддръжката за 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 влезе в историята преди няколко години — нещо, което лично на мен ми донесе невъобразимо облекчение тогава! :-)

IE проблем с “примигване” (flash) на фона

Вчера се борих с IE. Безуспешно.

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

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

Site scheme with 3 divs

За #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.

Read more

Разпределяне на времето в съвременния уеб дизайн

Днес се борих с Internet Explorer. За момента IE води в резултата, ама от злост се сетих за една диаграма, на която бях попаднал преди година и нещо в Интернет. Тръгнах да я издиря и успях. Ето я:

Time breakdown of modern web design:

Time breakdown of modern web design graphic

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

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

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

Microsoft Internet Explorer

Днес имах отвратителен ден…

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

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

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

Read more

Apple Safari 3.0 Beta – версия за Windows

Safari 3.0 Beta for WindowsSafari – с версия за Windows! Звучи почти невероятно, но ето че е факт…

Попаднах на новината съвсем случайно – като хвърлих един поглед към новия дизайн на 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) не работят…

Read more