title: Hiding DIV with absolute positioning causes reflow
body: <p>I'm curious if it expected behavior to do reflow when hiding absolutely positioned element?</p>
  
  <p>Consider example code below:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              .float {
                  position: absolute;
                  background-color: #E0E0E0;
                  padding: 5;
                  left: 100px;
                  top: 100px;
              }
          &lt;/style&gt;
          &lt;script&gt;
              function toggle() {
                  var float = document.getElementById("float");
                  var style = float.style;
  
                  if (style.display == "none") {
                      style.display = "block";
                  } else
                      style.display = "none";
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;a href="#" onclick="toggle();"&gt;Click to toggle!&lt;/a&gt;
          &lt;div id="float" class="float" style="display:none"&gt;Floating div&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I check Timeline tab in Chrome Dev Tools I see the following:</p>
  
  <p><img src="https://i.stack.imgur.com/wJrnN.png" alt="Dev Chrome Tool Timeline"></p>
  
  <p>Line 23 corresponds to <code>style.display = "none";</code> and my expectation is that no reflow is required.</p>
  
  <p>Am I wrong? Or did I misinterpret Timeline results? Is there a better way of doing this?</p>
  
  <p>Thank you!</p>