Model-viewer component not displaying until window resize

Hi there,

I am trying to use the Model Viewer web component (developed by Google) in an Ionic PWA - see links below.

Everything works great on Chrome (tested on windows, mac and android) but Safari (mac and ios) has some weird behavior: The component loads but you can’t see anything until you resize the window. On Safari (mac) if you resize the window a little the component suddenly appears. On Safari iOS if you tap in the address bar (as if you’re going to navigate to a new website) then hit cancel - the component suddenly appears!

I’m including the scripts (from a CDN) in the index.html file like so:

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

My usage looks like this:

<model-viewer 
    id="viewer"
    ar ar-scale="auto"
    src="path to my model" 
    alt="Name of my model" 
    auto-rotate 
    camera-controls 
    background-color="#e0e0e0"
    ios-src="path to my ios model">
</model-viewer>

My NgModule includes this (in order to get the custom component to work):

schemas: [CUSTOM_ELEMENTS_SCHEMA]

Anyone have ideas as to what could cause this?

The modelviewer examples (from the first link below) seem to work fine in all the browsers that I’ve tested. So I’m assuming that there’s some quirk on the Ionic side that I need to figure out.

Thanks,

https://modelviewer.dev/