javascripthtmlcssreflow

Force browser to trigger reflow while changing CSS

I am building non-jQuery responsive image slider based on CSS3 transitions.

The structure is simple: a viewport and inside relatively positioned UL with left floated LIs.

I am facing a problem in such situation:

  1. User clicks "prev" arrow.
  2. JS appends proper LI before currently displayed LI node.
  3. For now UL has set CSS transition as none 0s linear to prevent animation changes. In this moment I decrease UL CSS left value by slider width (let's say: from 0px to -1200px) to make view the same as it was.
  4. Now I am changing UL's transition property to all 0.2s ease-out.
  5. Now I am changing UL's left property to trigger CSS3 animation. (let's say: from -1200px to 0px).

What is the problem? Browser simplifies changes and does not make any animations.

Stoyan Stefanov wrote about reflow problem at his blog here, but in this case trying to force a reflow on element doesn't work.

This is a piece of code doing this (I skipped browser prefixes for simplification):

ul.style.transition = 'none 0s linear 0s'; ul.style.left = '-600px'; ul.style.transition = 'all 0.2s ease-out'; ul.style.left = '0px';

Here is fiddle to see problem in action: http://jsfiddle.net/9WX5b/1/

Solution

  • Requesting the offsetHeight of an element does everything nicely. You can force a reflow using this function and passing it the element that styles have been changed on:

    function reflow(elt){
    console.log(elt.offsetHeight);
}

    And call this where reflows are needed. See this example: http://jsfiddle.net/9WX5b/2/

    EDIT: recently needed to do this, and wondered if there was a better way than to console.log it. You can't just write elt.offsetHeight as it's own statement, as the optimizer (Chrome's, at least) will not trigger a reflow because it is just accessing a property with no getter set, no need to even evaluate it. So, AFAIK the cheapest way to do this is void(elt.offsetHeight), as it does not know for sure if void has side effects or not. (could be overridden or something, idk).