CODEWITHSUNDEEP
cssperformancegoogle-chrome-devtools
tusharmath
tusharmath

Reputation: 11002

Layout being triggered on css transform

I have an element div which has the following styles —

  height: '100%',
  willChange: 'transform',
  marginRight: '15px',
  transform: 'translateX(-100%)'

On touch move event I am updating the elements style.transform as follows —

el.style.transform = `translateX(${100 * x - 100}%)`

Apparently as the the information here https://csstriggers.com/transform These changes are not supposed to cause any Layout updates. But I still see a lot of Layout events on the timeline.

Upvotes: 0

Views: 1994

Answers (1)

Danish
Danish

Reputation: 1497

Css transforms is one of the property that if used through Javascript does cause browser to synchoronously calculate style and layout a.k.a reflow or Layout trashing. Have a look at this to learn about all possible elements that can cause Layout trashing https://gist.github.com/paulirish/5d52fb081b3570c81e3a

But here is the thing, According to my understandings, Transform is one of the property which browser can animate very cheaply with ease. and

transforms are the best properties to animate because the GPU can assist with the heavy lifting ref: HTML5rocks high performance animations

There is a nice example given on the topic of Avoid large, complex layouts and layout thrashing on developers.google, where at the bottom you could see a example of offsetWidth on reading writing DOM. I think you can try that with transform, i reckon it could be helpful.

EDIT: @Tushar could you provide js fiddle for your problem or advised how can i regenerate the exact probelem? I am raising this issue with csstriggers on git as well to learn more insight about your question. github.com/GoogleChrome/css-triggers/issues/23

Upvotes: 1

Related Questions