lit-virtualizer in mwc-dialog / Items overlap #81
Description
When lit-virtualizer is used in a mwc-dialog, the positioning of the rendered items is off sometimes.
I'm using version 0.4.2 and chrome 87.
Test code:
export class TestView extends LitElement {
render() {
return html`
<mwc-dialog id="dialog">
${this.renderVirtualizer()}
</mwc-dialog>
<mwc-button @click=${() => this.shadowRoot.getElementById('dialog').show()}>Click</mwc-button>
${this.renderVirtualizer()}
`
}
renderVirtualizer() {
return html`<lit-virtualizer style="height: 600px; width: 400px"
.items=${[1, 2, 3, 4, 5, 6, 7, 8]}
.renderItem=${(item) => this.renderItem(item)}
></lit-virtualizer>`;
}
renderItem(item) {
return html`<div style="height: 200px; border: 1px solid black; width: 300px"><h1>${item}</h1></div>`;
}
}
I've prepared a demo here: https://codepen.io/TomRauchenwald/pen/NWRxErO
I would expect the lit-virtualizer element that's rendered directly in the component to look the same as the one in the opened dialog.
Instead, the elements overlap in the dialog:
