Вчера се борих с IE. Безуспешно.
Проблемът накратко:
Да вземем най-простия пример. Създаваме нов 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! :-)
опитай универсалния фикс position:relative;
@uv:
Опитвал бях, май не помага. Приложено към #header, има нулев ефект… На всеки няколко отваряния на една от тестовите страници, все си “flash”-ва фона отдолу в червено…
Не знам, дори не съм убеден, че бих квалифицирал това като бъг. Не съм сигурен, че целия процес на зарежда на страница подлежи на някакви спецификации или дори можеш да имаш някакви очаквания от него. Просто shit happens. Може би има някакъв хитър начин да решиш този проблем, но на твое място не бих губил сън над него. Просто бих сменил цвета на фона и толкова. Или ако това е нечовишки неподходящо, бих излязъл с JS хак, който да сменя фона в последствие. Но при всички случаи, аз поне нямам идея – разгледах хедърите, порових малко в HTTP спецификацията и ти разгледах добре CSS-а. Предполагам си пробвал да разбиеш на background-image и background или да сложиш !important на определин места, с надеждата че може би има някаква магия на която IE би реагирал в тая ситуация, така че нямам какво конструктивно да допринеса :)
Здрасти,
При мен проблясване на background цвета не се появява нито в IE6, нито в IE7, даже и в IE5.5 не се появява :)
Което ме навежда на мисълта да си видиш настройките за кеширане на IE-то:
Tools > Internet Options > General > Browsing History или Temporary Internet Files > Settings > трябва да е на Automatically
Или пък да не би да ползваш IE Dev Toolbar и да си disable-нал кеша и да си забравил за това ? :)
На сървъра (response headers) и в самата HTML страница също можеш да видиш, но там е по-малко вероятно нещо да не е наред.
Ако всичко по-горе си е ОК, предполагам, че си говорим за същия тоя бъг с премигването при ховер, само дето тук е без ховер. В такъв случай опитай с едно от двете решения тук:
http://evil.che.lu/2006/9/25/no-more-ie6-background-flicker
Едното е с JS, а другото – с CSS expression, демек пак JS.
Успех!
И аз като Стефан Кънев смятам, че не може да е бъг нещо, което не е специфицирано. Не знам да има стандарт как да се избягва премигване при зареждане – все пак идеята на HTML-а не е да поддържа заблудата, че това е stand-alone приложение. За това и при подобни приложения се ползва Ajax.
@Стефан:
Опитах разни неща, но безуспешно…
Истината е, че съм виждал сайтове, които в IE7/6 изобщо не страдат от подобен бъг, няма дори и милисекунда “flash” на цвета на фона. И се чудех, може би не знам нещо, което другите знаят, може би пропускам нещо важно… някое CSS правило, което предотвратява проблема:) Странното е, че само IE, всички версии, забелязвам това, но не и във Firefox, Opera, Safari…
@Димо:
Нямам dev toolbar. Настройките за кеширане са си by default — Automatically. Естествено, че проверих и там вече:)
И не е примигването при :hover, защото IE7 не страда от него:)
Но пробвах и това, де, за идеята… не помага. Хм…
(*looks puzzled*)
Много ми е странна цялата история…
@Ирина:
“Бъг” в случая е фактът, че фонът е кеширан, но въпреки това IE първо показва цвета на фона и чак след това зарежда изображението… И странното е, че не се случва винаги или във всички дизайни… Опитвам се да разбера причината и да избегна примигването…:)
А е и бъг, защото поне 3 други добри браузъра не мигат, като заредиш същия html файл, тук не ни трябва AJAX, а просто да се вижда нормално всичко:)
А имаш ли някакви custom toolbars, plugins, ad blockers и т.н., които биха могли да забавят рендеринга на страницата под IE? Някакви Javascript-ове да се изпълняват? Пак казвам, на твоя test case при мен всичко работи перфектно под всички IE-та.
@Димо:
IE7: default settings, както си е директно от завода на Microsoft:)
IE6: използвам MultipleIE, и съм си инсталирал IE6 от този пакет.
JS няма. Има само html+css. Питах и други, един приятел уебдизайнер, на неговото IE също вижда проблясването на цвета. Писито ми е бързо — е, доста бързо, надали е от мегахерците… (в офиса P-D/2.8, вкъщи P4/2.6). И примигването не се вижда винаги, но в повечето случаи… и не на всички сайтове, само на някои. Вкл. на изчистения test case… :)
Ясно. Ами preload-вай картинката с Javascript, друго не мога да те посъветвам :)
@Димо:
Картинката е в кеша на IE, проверих, дори и да я сложа в html source-а, не помага, първо IE се опитва да сложи само цвят на фона на
#headerи след това поставя background-а, с минимално закъснение, но все пак, често видимо…probvaj vmest da go pishesh tsveta v sykraten shestnajsetichen vid, to v pylen vid, mislja che shte stane
:)
p.s. verno komentara mi e kasen, ama vse pak :)
@Bani4:
Ще опитам, но не мисля, че е там проблема… :-)
Здрасти, според мене това не е бъг а разлика в приоритетите на CSS правилата.
Поведението на Internet explorer е първо да покаже каквото е заредено до момента – в случая цвета от css стила, и чак като зареди изображението го заменя.
Същото поведение има и Firefox, разликата е, че Firefox показва директно изчисления вече стил без предпочитание в приоритета(избора между цвят или изображение) на CSS правилата. Тоест ако има налично(вече заредено) изображение Firefox ще го пусне първо преди цвета.
@Невян:
Ами и да не е бъг, изглежда така, сякаш е бъг. В IE “примигва”, а във FF — не. Май предпочитам начина на Firefox… :-)
А може ли някой да ми обясни защо експлорър 6 не показва прозрачността на .png файлове?
@kioki:
IE 6 е на възраст над 7 години, нормално е да не може да показва alpha канала в PNG файловете… Има JS fix-ове, които заобикалят този проблем, обаче. :-)
(Не е перфектно, но все пак…)