Background

[dhruvadhia1]

Description

Having different backgrounds for the model viewer css property for devices
Samsung Note 20
Samsung s20 FE

For the above two devices the background is white which is not intended

for all the other devices the background is correct which is like Grey radial gradient color as you can see in the image below

Live Demo

https://thecela.com/configurator/b0praVlKQWlvVDkxcHYxM0xLeGdxVEltcU49PQ%3D%3D/QVF0PQ%3D%3D/cDJBdW90PT0%3D/0/QXdWMw%3D%3D

Version

Latest

Browser Affected

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

OS

• [x ] Android
• iOS
• Linux
• MacOS
• Windows

[elalish]

Your screenshots appear to be from completely different sites; can you show two that are more comparable? This seems unlikely to be a model-viewer issue, so I'm moving this to a discussion.

[dhruvadhia1]

The difference is actually from different devices. Here is the link you can test

https://thecela.com/configurator/b0praVlKQWlvVDkxcHYxM0xLeGdxVEltcU49PQ%3D%3D/QVF0PQ%3D%3D/cDJBdW90PT0%3D/0/QXdWMw%3D%3D

now if you open this link on those two devices
Samsung Note 20
Samsung s20 FE

the background is white which is not intended. On other devices iOS and mostly all other android devices the background is as intended.

[elalish]

I don't know, your first screenshot is completely different from your second (and your link); not just a different background, but also completely different UX elements. I think there's something going on with the rest of your page unrelated to model-viewer being present.

[dhruvadhia1]

Hi Elalish,

Here is the image from same link, ignore the Cela link although the logic is same as both them are using Model Viewer.

[elalish]

My best guess is that you're specifying background-image: -webkit-radial-gradient(center, circle cover, rgb(255, 255, 255), rgb(0, 0, 0));, which I'm guessing may not be supported in certain browser versions? Have you tried plain old radial-gradient? https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient()

Anyway, I don't think this has anything to do with model-viewer, but that should be simple enough to test.

[dhruvadhia1]

Thanks Elalish, that could be it. Will test.