iOS Safari - poster not visible

[maciekglowka]

Hi all,

I have encountered a strange issue with mobile Safari.
It seems that before the model is loaded, Model-Viewer component has a width and height of 0.
It is definitely rendered because I can see my spinning preloader image and custom AR Button - but they are positioned in the upper left corner of the container DIV. That is why I am guessing it is a size issue.

It is testable here: (you have to click 'Przymierzanie' above the photo to load Model-Viewer)
https://pikle.eu/product_detail/fotel-no1-85

The examples on the modelviewer.dev work fine, so I am pretty sure the bug is on my side. I have just tested many different CSS options and nothing works.

On desktop FF,Chrome,Edge and mobile Chrome,Webview everything is fine.

[elalish]

I think that's just standard CSS stuff (think of MV as a div element). It looks like you've set it to width and height 100%, but of what? I'd guess the container above it doesn't have any size specified, so it all ends up being zero until content loads inside it.

[maciekglowka]

Thanks for taking a look.
That is the bizarre thing that the container has the right size - it is visible before the model is loaded (light gray background).

But the container is an absolutely positioned div - maybe that's the issue? it can be tricky sometimes for me.

If you say that it's 100% CSS thing I will do some more testing. Thanks!

[maciekglowka]

It is something rather strange. Even if I set min-width and min-height for the model viewer I get the same behaviour.
I wonder what does change when the poster is replaced by model that fixes the issue.