Question

153

Force browser to trigger reflow while changing CSS

rated 0 times [ 158] [ 5] / answers: 1 / hits: 33702 / 11 Years ago, sun, february 9, 2014, 12:00:00

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:

User clicks prev arrow.

JS appends proper LI before currently displayed LI node.

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.

Now I am changing UL's transition property to all 0.2s ease-out.

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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jadyngraysons

Add To Favorites

Follow

Total Points: 455

Total Questions: 109

Total Answers: 98

Location: Trinidad and Tobago

Member since Fri, May 8, 2020

4 Years ago

jadyngraysons questions

1 AWS Lambda SNS Destinations not working on failure or success

Fri, Aug 14, 20, 00:00, 4 Years ago

1 React Hooks useState Array empty with states rendered in the component

Tue, May 5, 20, 00:00, 4 Years ago

1 postman pm set environment variable

Thu, Apr 23, 20, 00:00, 4 Years ago

1 getElementById after dynamically adding it in React

Sat, Jan 18, 20, 00:00, 4 Years ago

1 How to customise Intl.DateTimeFormat date?

Tue, Dec 31, 19, 00:00, 4 Years ago

View All

answered 11 Years ago braydon · Accepted 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/

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).