lit
Clipping parents include ancestors of `position: fixed` element
Which package(s) are affected?
Virtualizer (@lit-labs/virtualizer)
Description
When a Virtualizer that is using the Grid display is within a position: fixed element ancestor that has sufficient width to display the grid, but which is in a subsequent ancestor with overflow: hidden and a width that is insufficient to display the grid, the list will not be rendered.
Within this code, I think we can update the filter to look something like the following to address this situation.
function getClippingAncestors(el: HTMLElement, includeSelf = false) {
let foundPositionFixed = false;
return getElementAncestors(el, includeSelf).filter(
(a) => {
const styles = getComputedStyle(a);
foundPositionFixed = foundPositionFixed || styles.position === 'fixed';
return !foundPositionFixed && styles.overflow !== 'visible';
}
);
}
Reproduction
In the index.html of the following repro, toggle on and off the width: 75px or the overflow: hidden to experience the issue.
https://lit.dev/playground/#gist=611a3a8ced4d469acbc8bae840b59a30
Workaround
- Patch the package.
- Make some hard (and possibly impossible) CSS application decisions
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
... >=1.0.0
Browser/OS/Node environment
All.
Unfortunately the repro link is linking to Hello World. I think the link may be too long and has failed.
If possible, could paste the code here, or share a playground gist link? Thank you!
Playground works! Thank you! I'm not the right person to triage this so looping in @usergenic.