White Screen/Blank Screen when loading an A-Frame Scene on iOS

[DJPoland]

• A-Frame Version: 0.9.2
• three-version: ^0.102..2
• Platform / Device: iPhone X iOS 12.2

A-Frame is not loading properly on iOS in the Safari browser. A simple scene such as:

<a-scene>
    <a-sky src="valid_image.jpg"></a-sky>
    <a-entity></a-entity>
</a-scene

will not render. It however works perfectly on android.

This seems to be a WebVR Polyfill issue since many of the warnings are related to "No DPDB device match".

[dmarcos]

Can you share a link to a full runnable experience? The a-sky example works fine for me on iPhone X / iOS 12.3

https://github.com/aframevr/aframe/blob/master/examples/boilerplate/panorama/index.html

https://aframe.io/aframe/examples/boilerplate/panorama/

[DJPoland]

After using Safari's developer tools for diagnosing the issue on my iPhone, it's apparently a CORS issue. It's really odd since I'm only encountering this CORS issue on mobile, or more specifically iOS and not android. I'm going to look into this issue more and then make a runnable experience on a public server.

[dmarcos]

If it’s a CORS issue there’s not much we can do on the A-Frame side. All apps have to comply with the rules browser vendors put in place.

[DJPoland]

It wasn't a CORS issue after all. For some reason I'm getting a TypeError: null is not an object (evaluating 'h.getContext("2d").drawImage') . I discovered the issue in the three.js file @ line 20309. Not sure why, but this looks like a three.js issue and not an aframe issue :(. Oddly enough this is only occurring on the iOS Safari browser.

[dmarcos]

Base of your scene on the A-Frame example that works well on iPhone X for me. Glitch to illustrate:

https://glitch.com/edit/#!/grandiose-child?path=index.html:11:87

If the problem happens with a specific image make sure is valid and it doesn't exceed the maximum size. You can try make it smaller.

I believe there's nothing actionable on the A-Frame side. Closing this and can reopen if necessary

[xr-dev-saurabh]

Hi, I'm running with same issue. My image is loaded but it shows only white blank screen. Here is the code image and its output. I'm using chrome browser on windows machine. You can see in the blob:"image url"

[dmarcos]

@usaurabh02 Might want to share a simple runnable example with https://glitch.com/~aframe otherwise hard to know what's going on. best of luck

[xr-dev-saurabh]

@usaurabh02 Might want to share a simple runnable example with https://glitch.com/~aframe otherwise hard to know what's going on. best of luck

I'm using Next.js and I have used a material-ui "modal" that takes image file as input and pass it as URL in the "src" of the a-sky. Here is the full code.

[dmarcos]

I'm not familiar with React / Next.js if it's a problem with A-Frame it should be reproducible with just A-Frame. In general not having code that people can run and debug it will make it harder to get help.

[dmarcos]

@usaurabh02 Also for usage questions I recommend StackOverflow and Discord. We use github issues for bug reports. Best of luck.