Bug: multiple model-viewers on the same page get mixed up and rendering breaks

[hybridherbst]

Description

It seems that under some conditions, multiple embedded models get "confused" and all model-viewers render the same model. In such cases, interaction breaks and nothing works anymore. Sometimes one of the original models still "glitches into view", not sure when exactly but seems when the canvas is partially overlapped.

https://user-images.githubusercontent.com/2693840/122986996-681ea900-d3a0-11eb-9e96-8743dae3c812.mp4

Live Demo

https://aged-foul-reason.glitch.me/

Version

• model-viewer: v1.7.2

Browser Affected

• [X] Chrome, version: xx.x.xxxx.xx
• [ ] Edge
• [ ] Firefox
• [ ] IE
• [X] Safari

OS

• [ ] Android
• [X] iOS / iPadOS
• [ ] Linux
• [ ] MacOS
• [ ] Windows

AR

• [ ] WebXR
• [ ] SceneViewer
• [ ] QuickLook

[elalish]

Ugh, WebKit strikes again! I just fixed something like this. It's working okay on my old iPhone SE, but I do see a little glitching still. Weird...

[elalish]

I'm going to put off trying to fix this for now, partly because any fix has a high likelihood of breaking other things, and also because I'm a little dubious it is fixable, since Safari seems to be doing something weird. But as a workaround: it appears the problem only occurs when multiple MV elements are visible on the page at once (and this causes a slow rendering path in both Safari and Firefox). If you construct pages to have enough spacing/text to keep the next model "below the fold", then the fast path will be used all the time and I'm pretty sure this bug won't be triggered.