react-tiny-virtual-list
react-tiny-virtual-list copied to clipboard
CSS `will-change` causing position problems
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
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.