Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I've nailed down exactly <em>what</em> is happening, but still do not know the cause of flip-flop:</p> <p><code>selectivizr.js</code> is not loading correctly every few page loads.</p> <p>All of the rules that use CSS3 selectors need that script to be applied in IE 7/8. Therefore when IE 7/8 does not load <code>selectivizr.js</code> correctly, those rules are ignored. Those rules certainly include the webfont references, as well as the errant <code>&lt;p&gt;</code> display properties.</p> <p>To remind you all, these helper JS scripts are being loaded normally (from within the <code>&lt;body&gt;</code>) with the initial page load, before my script replaces the <code>&lt;body&gt;</code> contents (<em>including that script reference</em>). Therefore, there's a chance it's initializing twice (can anyone confirm this?)</p> <p>The trouble is, on the control website, <code>selectivizr.js</code> <em>always</em> loads correctly in IE 7/8. There are also no known incompatibilities between the CSS3 helper js and the Media Query help js files (when initialized correctly).</p> <p>I removed <code>selectivizr.js</code> from the page and the page loaded exactly the same way after 20+ refreshes. Good to get consistency back, bad that I've lost my CSS3 rules in IE 7/8.</p> <p>Apparently this is how the js plugin in question works:</p> <blockquote> <p>In accordance with the W3C specs, a web browser should discard style rules it doesn’t understand. This presents a problem — we need access to the CSS3 selectors in the style sheet but IE throws them away. To avoid this issue each style sheet is downloaded using a XMLHttpRequest. This allows the script to bypass the browsers internal CSS parser and gain access to the raw CSS file.</p> </blockquote> <p>Source: <a href="http://www.css3.info/css3-pseudo-selectors-emulation-in-internet-explorer/" rel="nofollow">http://www.css3.info/css3-pseudo-selectors-emulation-in-internet-explorer/</a></p> <p>I can try any suggested CSS3-selector plugins that you all may have; maybe one will load more reliable, or have less overhead and thus less room for lag-related issues. Any alternatives?</p> <p><strike>Or, perhaps I should add it <em>after</em> the DOM is ready the second time (after my script replaces the body contents) to the <code>&lt;head&gt;</code> or elsewhere in the <code>&lt;body&gt;</code>.</strike> <em>None of these options worked - they had the same if not worse outcome</em>.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload