react-tiny-virtual-list icon indicating copy to clipboard operation
react-tiny-virtual-list copied to clipboard

CSS `will-change` causing position problems

Open nicubarbaros opened this issue 6 years ago • 1 comments

Hey, thanks for the great tiny module.

There is a small problem in case there are elements with position: fixed inside the virtualized list (container) which is settings will-change: transform. According to the 2 links below the elements with position: fixed will become relative to the element with the transform - not relative to the viewport, in this case to the virtualized container.

I am not sure what is the purpose of will-change: transform style. But for now I overwrote the style by setting will-change: unset

The below links I wrote above: (Stackoverflow) CSS: position:fixed inside of position:absolute W3C transform-rendering

nicubarbaros avatar Mar 13 '18 15:03 nicubarbaros

I've also overridden will-change, because it makes all text in the list render poorly in Chromium. I can't see any performance difference in Chrome, and it's actually a bit faster in Firefox.

The MDN documentation warns against applying will-change indiscriminately.

y6nH avatar Feb 03 '20 14:02 y6nH