Internet Explorer 8, как много в этом имени для рядового веб-разработчика :-) Браузер, который с одной стороны до сих пор удерживает значительную часть рынка (а значит не может быть просто так проигнорирован), а с другой — обладает тяжелым наследием IE6 в виде массы «особенностей» поведения и отсутствием поддержки целого ряда новых и вкусных технологий которые так хочется использовать. Эта двойственность породила целый ряд т.н. polyfills — JS скриптов которые призваны хоть немного подтянуть IE6-8 до уровня современных браузеров. Об одном из них и пойдет речь в данной статье.
Selectivizr — прекрасный скрипт который магически (путем простого подключения к странице) добавляет поддержку целого ряда CSS3 селекторов в IE6-8 что избавляет разработчика от необходимости добавлять в код и стили сайта кучу «костылей» для исключения использования CSS3 селекторов. Для своей работы требует наличие подключенного JS фреймворка (поддерживаются jQuery, Mootools, Prototype, Dojo и ряд других), но один из этих фреймворков и так обычно присутствует почти в любом современном сайте.
Конечно selectivizr не всемогущ и на данный момент есть ограничения в его использовании, например, c динамическим контентом, но в любом случае это очень полезный скрипт и я использую его при разработке всех своих последних проектов. Как раз проблема в одном из них и побудила меня написать эту небольшую статью чтобы поделиться информацией с сообществом.
Перед запуском одного из проектов я получил bugreport от тестировщика о странном поведении сайта в IE8: при вводе URL и попытке загрузить сайт браузер отображал пустую страницу, но после повторного нажатия Enter в строке адреса сайт нормально загружался, отображался и работал. При этом проблема касалась только IE8 (на самом деле IE7 тоже, но он в том проекте не поддерживался), а IE9 в режиме работы IE8 вел себя как надо. Более того — дальнейшее изучение проблемы показало что:
- Браузер нормально загружал саму страницу и все связанные с ней файлы
- DOM нормально строился и запускался
- Элементы страницы были на своих местах, можно было найти и кликнуть ссылку, найти и ввести данные в поля ввода
… но сама страница выглядела совершенно пустой. В developer tools было видно что <BODY> имеет нулевую высоту, но попытки задать и/или изменить высоту ни к чему не приводили.
Поиск ответа в интернете показал что проблема известна (1, 2, 3), но предлагаемые решения не работают.
Дополнительные эксперименты показали что проблема — в конфликте selectivizr и деклараций custom шрифтов @font-face в CSS. При этом обнаружился один нюанс который в итоге позволяет на данный момент обойти проблему: конфликт возникает только в в случае если декларация @font-face расположена во внешнем .css файле. При размещении декларации @font-face в теге <style> конфликта не происходит, custom шрифты работают нормально и WSOD исчезает.
Надеюсь данная информация будет полезной и сэкономит кому-то время на поиски причины WSOD и способа ее устранения.
Автор: Flying
