Colir

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

Colir

<div class="holder">
  <div class="color-1"></div>
  <div class="color-2"></div>
  <div class="color-3"></div>
  <div class="color-4"></div>
  <div class="color-5"></div>
</div>

Colir

<section class="container">
  <div class="col-xs-7 img">
      <img src="http://babeholder.pixoil.com/img/1024/4:3">
  </div>
  <div class="col-xs-5">
      lorem ipsum dude
  </div>
</section>

Colir

<div class="container">
  <div class="row cycle-slideshow" data-cycle-fx=carousel data-cycle-timeout=1000 data-cycle-carousel-visible=6 data-cycle-carousel-fluid=true data-cycle-slides="div">
    <div class="span2"><img src="http://lorempixel.com/200/200/"></div>
          <div class="span2"><img src="http://lorempixel.com/200/200/"></div>
        <div class="span2"><img src="http://lorempixel.com/200/200/"></div>
        <div class="span2"><img src="http://lorempixel.com/200/200/"></div>
        <div class="span2"><img src="http://lorempixel.com/200/200/"></div>
        <div class="span2"><img src="http://lorempixel.com/200/200/"></div>
        <div class="span2"><img src="http://lorempixel.com/200/200/"></div>