iOS 15 `height: 100%` leads to canvas resizing as floating address bar is expanded

[jparismorgan]

Description:

• A-Frame Version: 1.2.0
• Platform / Device: iPhone 12 Pro Max, iOS 15 beta 4
• Reproducible Code Snippet or URL: https://aframe.io/aframe/examples/showcase/link-traversal/

On iOS 15 beta 4, released July 28 2021, the behavior of height: 100% changed. With this change using height: 100% now leads to the scene resizing as the floating bar is expanded / minimized, which is a bad user experience. You can see this here:

https://user-images.githubusercontent.com/1396242/127441266-1aa75d58-c1e2-4ef5-a47b-5e2d33124413.mp4

One way to (partially) fix this is to set the following:

html.a-fullscreen .a-canvas {
  ...
  height: 100vh !important;
  /* old: height: 100% !important; */
}

a-scene {
  ...
  height: 100vh;
  /* old: height: 100%; */
}

This would have to be set programmatically after detecting that we're running on an iOS 15 device as, funny enough, doing this on old iOS versions leads to this same bug happening on them. Here you can see the effect of this fix - canvas no longer jumps up and down. You can also see why I said it's a partial fix, as the width is still slightly off. I did test with width: 100vw, but it didn't fix the issue:

https://user-images.githubusercontent.com/1396242/127442243-efb613ff-9fcd-42b3-bcba-bc257bb821fa.mp4

I also commented on a WebKit bug originally filed because of the behavior of height: 100vh asking whether this new change in behavior was intentional or a bug: https://bugs.webkit.org/show_bug.cgi?id=141832#c35

Please let me know if I can provide more information, thank you!

[dmarcos]

Thanks for the info. PRs always welcome.

[jparismorgan]

@dmarcos no promises, but I am looking at this.

Another complication is that A-Frame doesn't do iOS version or browser detection. But in this case we only want to adjust the height styling on iOS 15+ devices in Safari (specifically not all WebKit browsers like Chrome / Firefox / Twitter WebKit etc.), so we'll need isIOS15OrGreater() and isIOSSafari() methods.