My site has many style sheets customized for varying screen widths. As the browser is resized, the window.onresize
event checks that a resize actually took place by looking at document.documentElement.clientWidth
. If it did, it turns on successively larger style sheets until scrollbars appear. Then, it turns them off in reverse order until scrollbars disappear. Scrollbars are detected by comparing offsetWidth
to scrollWidth
.
In IE8, two new problems confound detection of a resize. One, onresize
fires whenever scrollbars appear or disappear, and two, d.dE.clientWidth
reports the width without scrollbars, a break from IE7 and all other browsers. My site now frequently gets trapped in a loop in which the onresize
logic activates a larger style sheet, which creates scrollbars, which then triggers another resize event that cannot be filtered out because the clientWidth
has changed due to scrollbars appearing or disappearing. This would be a trivial fix if IE8 had something like outerWidth
I could check.
Since I had never dealt with scrollbar generation triggering onresize in any browser, I did not realize that checking d.dE.clientWidth was not a good verification, and in fact never did include the scrollbars. I now check d.dE.offsetWidth instead, and the repeated onresize events are filtered out.
You're almost certainly aware of this - and it doesn't really answer your questions as it's forcing IE8 out of Standards Mode - but the quick fix would be to force IE8 into IE7 mode using an HTTP header.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With