Display: None applied Canvas only for iOS, no models show

[phil-kt]

Similar issues as reported before (#2532) but I just tried viewing my new portfolio on Safari for iOS, and for some reason the Canvas element has display:none applied through javascript styling, only when I open it on Safari my phone. When using Safari on Mac the webapp renders just fine.

you can see my website live at http://philkt.netlify.app and the code here

I have no idea how to repro this or why it seems to be only applied on iOS? It displays fine on Chrome in Android and am not doing any real customized css or code on the Canvas element.

Safari on iOS Inspector

Safari on Mac Inspector

[drcmda]

it doesn't come from us 🤷‍♂️ it must be some kind of extension. i can open any threejs site in safari just fine, mobile and desktop, and no known issues with that. the issue you linked isn't ios/safari, that was user error on react-native + fiber.

[phil-kt]

@drcmda I dug into this a bit, trying to create a repro. For now I've figured out that the canvas is never rendering/loading in and that's why my canvas has display none, I just see my Suspense fallback display. Similar to this (#2546) except it appears to happen on real iPhones too, not just simulators.

(sorry for closing/reopening, got confused with the comment UI)

[drcmda]

that issue again is react-native. im not sure now, do you struggle with the dom, or react-native and expo? it looks to me your model does not load, wrong path or something like that.

[phil-kt]

no I'm not using react-native or expo, just react, three-fiber, drei, and gatsby. So not sure where along the bug is happening. The site loads fine on everything except iOS Safari for some reason. I'll dig into CodyJasonBennett's suggestions.

[CodyJasonBennett]

#2546 is a bug in XCode/Apple OpenGL where the emulator will not push frames; that has to do with the WebGL implementation used in react-native and can't be reproduced on web. We have to maintain that in our spare time so it's not as flushed out as a real browser implementation.

This I'd try to isolate by iteratively removing things from the page until you just have the canvas and any other problematic elements. The only thing unclear for me when reading through the source is the use of [hidden] { display: none } and whether that's interfering with suspense in react-dom (sometimes react will toggle elements' visibility while it waits for suspense to resolve). Otherwise, I know I've had layout issues in early versions of MacOS Monterey with display: flex; flex-direction: grid which was fixed with display: grid;, but that would cause things to incorrectly stretch or expand and not affect its page visibility.

[phil-kt]

@CodyJasonBennett @drcmda thanks for the pointers, I've isolated my issue to my videoTexture causing my site not to leave Suspense. It seems iOS Safari has a history of not working with video textures. It could possibly be a CORS issue, but I'm hosting this video on my own? Not sure how I'm gonna resolve this one.

EDIT: looks like updating drei that included this PR was the ticket! Canvas now successfully loads on iOS simulator.