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

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!

Start with the linked link-traversal reproduction and inspect where the html.a-fullscreen .a-canvas and a-scene styles are defined and applied. Test the reported iOS 15 behavior against older iOS versions, then verify that the scene and canvas no longer resize with the floating address bar without regressing older devices.