Simon Simon - 2 days ago 5
CSS Question

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/

Thanks.

Answer

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/

Comments