model-viewers (5.7MB) causes other primitive components to "lag" across the page when scrolling

I’m using model-viewer to display 1 model-viewer per card, and I have about 2-5 cards on the screen at any given time and about 11 models (5.7MB each) on the page total. Whenever I scroll down the page of cards, the models follow the scrolling fine (with low “latency”), and all of the other components, including the divs that hold the models and the text within those divs lag behind. What can be done to improve this experience?

P.S. Even when the page is only showing one model (the others are visibility: hidden), there is enough lag to be noticeable.

[danksky]

@cdata Here ya go: https://model-viewer-mapbox-demo.herokuapp.com/

[cdata]

Alright, after a bit of poking, I think we uncovered the problem. It seems that the problem only occurs in Chrome (please let us know if you discovered this issue in other browsers).

Fundamentally, the problem is that the <model-viewer> elements are being rendered on the compositor, and their containers are not, so there is an async lag between the two as they paint.

One potential fix for this is to force the container to be rendered on the compositor by forcing it onto a render layer. You can do this in Chrome by setting a CSS property like will-change: transform or transform: translate3d(0, 0, 0) on the container. For example, I was able to set transform: translate3d(0,0,0) on <div class="demo-list"> and the lag in your demo disappears.

Please be aware that while this will fix the problem, render layers allocate GPU memory, and if they are overused you will see bad effects from them on mobile devices and possibly even desktop browsers. I recommend using the “Layers” tab in Chrome dev tools to analyze the cost of the layers you have created.

Kudos go to @azakus for applying his deep well of web platform knowledge to this problem 🍻