clauderic / clauderic/react-tiny-virtual-list

CSS `will-change` causing position problems

Open
#46 1 comment 5 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
2.5k
Forks
159
PR merge metrics
No merged PRs in 30d

Description

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](https://stackoverflow.com/questions/15152712/css-positionfixed-inside-of-positionabsolute)
[W3C transform-rendering](https://www.w3.org/TR/css-transforms-1/#transform-rendering)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.