title: Weird behaviour in Chrome regarding document.styleSheets
body: <p>I've got this code...</p>
  
  <pre><code>function disableSheets(){
    console.log(document.styleSheets.length);
      var c = document.styleSheets.length;
      for(var i=0;i&lt;c;i++){
        console.log(document.styleSheets[i]);
          if(typeof document.styleSheets[i]!=='undefined' &amp;&amp; document.styleSheets[i].href.indexOf('stylezone')!=-1){
            document.styleSheets[i].disabled=true; 
          }
      }
      console.log(document.styleSheets.length);
  }
  </code></pre>
  
  <p>When I run it in Firefox/Firebug it says:</p>
  
  <pre><code>3
  StyleSheet
  StyleSheet
  StyleSheet
  3
  </code></pre>
  
  <p>When I run it in Chrome/Developer Tools it says:</p>
  
  <pre><code>3
  CSSStyleSheet
  CSSStyleSheet
  undefined
  1
  </code></pre>
  
  <p>So my questions are:</p>
  
  <ol>
  <li>Why would it say there are 3 stylesheets if the 3rd is undefined?</li>
  <li>How did I lose 2 stylesheets by the end of that loop?</li>
  <li>What happened to the 3rd sheet?</li>
  </ol>
  
  <p>At the top of my HTML I have the 3 <code>&lt;link&gt;</code>s, linking the 3 stylesheets, and then immediately after that I call <code>disableSheets()</code>.</p>