title: internet explorer 11 style calculation on :active
body: <p>Hi stack overflow community :)</p>
  
  <p>this is driving me crazy ...
  it is about internet explorer 11 (didnt test previous versions, doesnt matter).</p>
  
  <p>Sorry for the german screenshots of IE etc.</p>
  
  <p><strong>The Problem:</strong></p>
  
  <p>I have this huge table, about 1500 lines with a noticeable amount of elements inside.
  So one cause of the problem is the amount of elements, probably exceeding
  1500 lines * 7 cells * 2 HTML elements.
  This is a fact i am not allowed to change ;)
  Clicking on the scrollbar button triggers a style calculation of all elements inside
  the scrollable element. Due to the amount of the elements this style calculation
  takes about 300ms, therefore noticeable.</p>
  
  <p>The code:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .fooooooo:active {
          /* just remove this EMPTY rule to "fix" IE? */
      }
  
      * {
          padding: 0;
          margin: 0;
      }
      html, body {
          min-height: 100%;
          height: 100%;
      }
  
      .screen-container {
          height: 100%;
          overflow: scroll;
      }
  &lt;/style&gt;
  
  &lt;section class="screen-container"&gt;
      &lt;table&gt;&lt;!-- huge --&gt;&lt;/table&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>How to reproduce:</strong></p>
  
  <p>Open IE "devtools", start a profiling session and just click on the scrollbar button of the <code>&lt;section&gt;</code> element.
  Stop the profiling session and glance at the green bars - about 300ms style calculations. One for the click (":focus",":active"?)
  on the button, one for the :blur on the button?
  @see screenshot and or try the fiddle. <a href="https://jsfiddle.net/y3tjmgdq/2/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p><a href="https://i.stack.imgur.com/4Pc8q.png" rel="nofollow noreferrer">screenshot of jsfiddle with IE devtools</a></p>
  
  <p><strong>More information i found out so far:</strong></p>
  
  <p>1# The very existence of the CSS rule ".fooooooo:active" is enough. Notice that this rule has
  no rules nor does it match any element.
  Just removing it "prevents" the 300ms style calculation.</p>
  
  <p>2# Moving the scrollbar away from the <code>&lt;section&gt;</code> to the <code>&lt;body&gt;</code> element also "fixes"
  the style calculation problem. Probably because "body:active" "is not allowed"?. At least i cant
  get it to work ;)</p>
  
  <p>3# it doesnt matter if we have a huge <code>&lt;table&gt;</code> or a huge soup of <code>&lt;div&gt;</code>'s</p>
  
  <p>I appreciate any information you can give me :)</p>
  
  <p><strong>Solutions i can NOT take:</strong></p>
  
  <ul>
  <li>Moving the scrollbar to the <code>&lt;body&gt;</code></li>
  <li>Replacing :active with JS and regular .active CSS classes.</li>
  <li>Reducing the amount of elements (paging etc.) (my dear and lovely customer want it like that!)</li>
  </ul>