[labs/virtualizer] Investigate `contain` CSS property
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 21.8k
- Forks
- 1.1k
- Avg merge
- 18h 25m
- Merged PRs (30d)
- 2
Description
### Which package(s) are affected?
Virtualizer (@lit-labs/virtualizer)
### Description
At the moment, `contain: size layout;` is added to the virtualizer host element. This causes `position: fixed` children to not break out of the host's bounding rect anymore. As long as we don't have `popover` in every browser, it is either `position: fixed` or portalling to have elements appear in the "top layer" of the page.
As discussed briefly on Discord, the reason for `contain: size layout;` is unclear at the moment. This issue is for investigating if it is needed and also measuring the performance with/without it.
### Reproduction
-
### Workaround
-
### Is this a regression?
No or unsure. This never worked, or I haven't tried before.
### Affected versions
2.0.0
### Browser/OS/Node environment
macOS 13, all browsers.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in the @lit-labs/virtualizer package by locating where `contain: size layout;` is applied to the virtualizer host. Measure behavior and performance with and without the containment, including the documented `position: fixed` case, and finish by determining whether the property is needed and recording the findings.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100