[lab/virtualizer] doesn't render horizontal layout correctly on Safari on first load

[monkeyjabs]

Which package(s) are affected?

Virtualizer (@lit-labs/virtualizer)

Description

We have a scenario in our app where the LitVirtualizer doesn't render horizontal flow correctly on the first load in the Safari browser. A subsequent update to the items list seems to fix the issue.

• This only reproduces within our app and Safari
• I'm unable to reproduce this when isolating this into its own sandbox

Our code specified this:

<x-virtualizer
    style="min-height: 50px"
    .layout=${flow({ direction: "horizontal" })}
    scroller
    .items=${this.items}
    .renderItem=${this._renderItemProxy}
></x-virtualizer>

When inspecting the DOM on Safari during the first load I noticed the elements inside the LitVirtualizer did not the transform style it needs to layout out the horizontally:

<x-virtualizer style="min-height: 50px; display: block; position: relative; contain: strict; overflow: auto;" scroller="" dir="ltr">
<div virtualizer-sizer="" style="position: absolute; margin: -2px 0px 0px; padding: 0px; visibility: hidden; font-size: 2px; transform: translate(1000px, 0px);">&nbsp;</div>
            <div class="proxy-item-ltr " id="idx-0">
            </div>
            <div class="proxy-item-ltr " id="idx-1">
            </div>
            <div class="proxy-item-ltr " id="idx-2">
            </div>     
</x-virtualizer> 

When it's working correctly we can see that in-style is applied to these items:

<x-virtualizer style="min-height: 50px; display: block; position: relative; contain: strict; overflow: auto;" scroller="" dir="ltr">
    <div class="proxy-item-ltr " id="idx-0" style="position: absolute; box-sizing: border-box; transform: translate(0px, 0px); left: 0px;">      
    </div>
    <div class="proxy-item-ltr " id="idx-1" style="position: absolute; box-sizing: border-box; transform: translate(216px, 0px); left: 0px;">     
    </div>
    <div class="proxy-item-ltr " id="idx-2" style="position: absolute; box-sizing: border-box; transform: translate(432px, 0px); left: 0px;            
    </div>
</x-virtualizer>

Reproduction

Initial of the our app (unfortunately can't share to public yet)

Workaround

In the component initialize the items array with an initial value and on firstUpdated() life cycle method update the items array again with a different sets of value

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

"@lit-labs/virtualizer": "0.7.1"

Browser/OS/Node environment

Browser: Version 15.6 (17613.3.9.1.5)

[graynorton]

Thanks for filing! Not sure if you can easily do this within the constraints of your app layout, but would it be possible to see if the same problem occurs with the layout in (default) vertical mode? I strongly suspect that the issue isn't related to it being horizontal, but is caused by something else specific to the way virtualizer initializes within the app's first render.

[monkeyjabs]

@graynorton If I specified a vertical layout then, the same issue still occurs, no styling applies to the element on the first render.

<x-virtualizer style="min-height: 50px; display: block; position: relative; contain: strict; overflow: auto;" scroller="" dir="ltr">
<div virtualizer-sizer="" style="position: absolute; margin: -2px 0px 0px; padding: 0px; visibility: hidden; font-size: 2px; transform: translate(1000px, 0px);">&nbsp;</div>
            <div class="proxy-item-ltr " id="idx-0">
            </div>
            <div class="proxy-item-ltr " id="idx-1">
            </div>
            <div class="proxy-item-ltr " id="idx-2">
            </div>     
</x-virtualizer> 

[preethialuru]

We also have the same issue in our app where we use LitVirtualizer with a mobx observable to display a grid. We see this issue on every render. We see this issue every time the component is re-rendered because of changes in the list. But when we re-assign the list, CSS would be applied correctly.

Here, you can see that the inline-style is not applied to the card:

<sp-grid id="grid" tabindex="0" style="outline: none !important; display: block; position: relative; contain: strict; min-width: 100%; min-height: 288px;">               
            <x-organizer-folder-card draggable="true" tabindex="-1">
            </x-organizer-folder-card>
</sp-grid>

When it’s working correctly we can see that inline-style is applied to the card:

<sp-grid id="grid" tabindex="0" style="outline: none !important; display: block; position: relative; contain: strict; min-width: 100%; min-height: 288px;">
            <x-organizer-folder-card draggable="true" tabindex="-1" style="position: absolute; box-sizing: border-box; transform: translate(24px, 24px); width: 238px; height: 64px;">
            </x-organizer-folder-card>
</sp-grid>

[preethialuru]

Hi Team, We are facing two issues related to this bug. Please take a look at these issues.

Issue 1: (Edited 11/7 - This is happening only in IOS version <16.0. In IOS 16.0, this is not reproducible anymore.) This is related to the first render on safari. We see that inline CSS is not being applied on cards.

In the attached video, you can see that for the first time, cards are not rendered properly in the grid. But when I click on the Show more button, since we are re-rendering the grid here, cards are rendered correctly because the inline CSS is applied on the cards this time.

In Virtualizer.ts file, we noticed that on the first render, ‘itemPositionChange’ event is triggered, which will update ‘_childrenPos’ value here. And that will eventually call _positionChildren method to apply the position (inline CSS) to the children of sp-grid.

But we noticed that by the time this method is called, no children are added to the sp-grid and hence no CSS is applied. That means this method ‘_positionChildren’ is called even before the children are appended to sp-grid.

Issue 2: Whenever a card/item is updated, we see that the updated card is misplaced as CSS is not being applied to it. This is occurring both on Safari and Chrome.

In Virtualizer.ts file, we see that this method _updateDOM gets executed when any of the events are triggered. Inside that method, CSS would be applied to the children after this line. But whenever we perform any operation on card, we see that the execution stops before this line and hence CSS is not being applied on children. Suspecting that _mutationPromise might not be resolved and so the execution does not proceed.

[graynorton]

Here's a fairly minimal repro case involving lit-mobx (tap the Swap button after the initial render): https://lit.dev/playground/#gist=dcd6e88aab653c7a4972424062fbac15

And here's a similar repro case without lit-mobx: https://lit.dev/playground/#gist=0333402d575de67644292ffb0c779fef

We have an apparent fix for this issue that will be in the next release.