Selectivizr, IE8 and White Screen of Death
Internet Explorer 8, how much is in this name for an ordinary web developer :-) The browser, which on the one hand still holds a significant part of the market (and therefore cannot be simply ignored), and on the other hand, has a heavy legacy of IE6 in the form of a mass of “features” of behavior and the lack of support for a whole range of new and tasty technologies that one would like to use This duality gave rise to a number of so-called. polyfills - JS scripts that are designed to tighten IE6-8 to the level of modern browsers. One of them will be discussed in this article.
Selectivizr is a great script that magically (by simply connecting to a page) adds support for a whole range of CSS3 selectors in IE6-8, which saves the developer from having to add a bunch of crutches to the site’s code and styles to prevent using CSS3 selectors. It requires a connected JS framework for its work (jQuery, Mootools, Prototype, Dojo and a number of others are supported), but one of these frameworks is usually present in almost any modern site.
Of course, selectivizr is not all-powerful and at the moment there are limitations to its use, for example, with dynamic content, but in any case it is a very useful script and I use it when developing all of my recent projects. Just the problem in one of them prompted me to write this short article to share information with the community.
Before launching one of the projects, I received a bugreport from the tester about the strange behavior of the site in IE8: when entering the URL and trying to load the site, the browser displayed a blank page, but after pressing Enter again in the address bar, the site loaded, displayed and worked. At the same time, the problem concerned only IE8 (in fact, IE7, too, but it was not supported in that project), and IE9 behaved as it should in IE8. Moreover, further study of the problem showed that:
... but the page itself looked completely empty. In the developer tools, it was clear that <BODY> has a zero height, but attempts to set and / or change the height lead nowhere.
')
An online search for an answer showed that the problem is known ( 1 , 2 , 3 ), but the proposed solutions do not work.
Additional experiments have shown that the problem is in the conflict between selectivizr and custom font declarations @ font-face in CSS. At the same time, one nuance was revealed which, as a result, allows to get around the problem at the moment: a conflict only occurs if the @ font-face declaration is located in the external .css file. When placing the @ font-face declaration in the <style> tag, there is no conflict, custom fonts work fine, and WSOD disappears.
I hope this information will be useful and will save someone time to search for the causes of WSOD and how to eliminate it.
Selectivizr is a great script that magically (by simply connecting to a page) adds support for a whole range of CSS3 selectors in IE6-8, which saves the developer from having to add a bunch of crutches to the site’s code and styles to prevent using CSS3 selectors. It requires a connected JS framework for its work (jQuery, Mootools, Prototype, Dojo and a number of others are supported), but one of these frameworks is usually present in almost any modern site.
Of course, selectivizr is not all-powerful and at the moment there are limitations to its use, for example, with dynamic content, but in any case it is a very useful script and I use it when developing all of my recent projects. Just the problem in one of them prompted me to write this short article to share information with the community.
Before launching one of the projects, I received a bugreport from the tester about the strange behavior of the site in IE8: when entering the URL and trying to load the site, the browser displayed a blank page, but after pressing Enter again in the address bar, the site loaded, displayed and worked. At the same time, the problem concerned only IE8 (in fact, IE7, too, but it was not supported in that project), and IE9 behaved as it should in IE8. Moreover, further study of the problem showed that:
- The browser normally loaded the page itself and all files associated with it.
- DOM was built and run normally.
- The page elements were in their places, you could find and click on the link, find and enter data in the input fields
... but the page itself looked completely empty. In the developer tools, it was clear that <BODY> has a zero height, but attempts to set and / or change the height lead nowhere.
')
An online search for an answer showed that the problem is known ( 1 , 2 , 3 ), but the proposed solutions do not work.
Additional experiments have shown that the problem is in the conflict between selectivizr and custom font declarations @ font-face in CSS. At the same time, one nuance was revealed which, as a result, allows to get around the problem at the moment: a conflict only occurs if the @ font-face declaration is located in the external .css file. When placing the @ font-face declaration in the <style> tag, there is no conflict, custom fonts work fine, and WSOD disappears.
I hope this information will be useful and will save someone time to search for the causes of WSOD and how to eliminate it.
Source: https://habr.com/ru/post/142932/
All Articles