IOS iframe blurry until interacted with

[JothamD]

Once my model loads in, it goes blurry until it is interacted with. My website is a wix site and I used an iframe for my code. It seems to be blurry only with IOS, and It is the same on chrome and safari.

Video demo:
https://vimeo.com/479985534

My code entered into wix iframe:

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

model-viewer{
width: 100%;
height: 100%;
margin: 0 auto;
--poster-color: transparent;
}
</style>
src="https://ad-link-to-ar.s3-eu-west-1.amazonaws.com/My+site/uploads_files_2424049_candle_milk_honey.glb"
poster="https://ad-link-to-ar.s3-eu-west-1.amazonaws.com/My+site/candleposter.png"
ios-src="https://ad-link-to-ar.s3-eu-west-1.amazonaws.com/My+site/uploads_files_2424049_candle_milk_honey.usdz" ar quick-look-browsers="safari chrome" camera-controls minimumRenderScale="1" >

- model-viewer: v1.3.0

Browser Affected

• Chrome

• Safari

OS

• iOS

[elalish]

Sorry I missed this earlier. This is expected behavior (it's low-res while moving, transitioning to high-res when still). I noticed you tried to fix it with minimumRenderScale=1, but it's not an attribute, it's a static property. Try this instead:

const ModelViewerElement = customElements.get('model-viewer');
ModelViewerElement.minimumRenderScale = 1;

See alternatives here.

[rinaldi-mango]

Running into a similar issue, did this suggestion resolve the issue? Also would you add this code within the iframe or in the code that the iframe is referencing?

[elalish]

If this works, but you don't notice a corresponding drop in frame-rate, please post here about that. I'm beginning to wonder if the GPU is somehow throttled in iframes on iOS.