Bug 218983 – iOS: visualViewport.height unreliable in standalone PWA mode

• Status: NEW
• Component: Layout and Rendering

[Andrea Giammarchi]

If an input gets focused while in landscape, and then the keyboard gets dismissed, rotating to portrait would trigger a visualViewport resize event but its height/dimension won't reveal the real available height on the screen.

How to reproduce:

  * visit https://webreflection.github.io/screenfit/
  * add to home screen the page
  * start the screenfit PWA
  * rotate to landscape (wider width)
  * focus the input
  * dismiss the keyboard
  * rotate back to portrait (taller height)

The screen is now stuck with a smaller area than it should.

As example, on iPhone 12 mini the landscape height is 375px, while the portrait height is 762px ... after triggering in/out the keyboard on landscape, the portrait height becomes 325px, while it's 382px when the keyboard is up.

Focusing the input and dismissing the keyboard again in portrait fixes the issue, but the fact landscape keyboard breaks expectations is both unexpected, and apparently unique to iOS, as behavior, but it's undetectable, and there's no easy fix from userland.

Thanks for improving this, if possible.

[Smoley]

Thanks Andrea, I can reproduce this on iOS 13.6.1 as well as the current 14.3 beta.

[Radar WebKit Bug Importer]

<rdar://problem/71468939>

[Danila]

yes, also met with this problem :( Is it possible to solve it? :(

[Viktor Neufeld]

Created attachment 445413 [details]
Example PWA sourcecode to reproduce, includes example video and screenshot

https://github.com/DSTester/ElementsMovingWithFixedPosition

[Viktor Neufeld]

Created attachment 445414 [details]
Example PWA sourcecode to reproduce

https://github.com/DSTester/ElementsMovingWithFixedPosition

[Viktor Neufeld]

I researched an bug with an moving HTMl-Element which should be at the bottom of the PWA, but gets moved up and hides the content behind it, if you follow the steps to reproduce this bug. My research brouhgt me here, so i past my finding here:



## Summary
An footer element with the CSS properties `position=fixed` and `bottom=0` will get scrolled up and hides the content behind it. This happens if you used the keyboard and rotate your device from landscape to portrait. That's a problem because it's hard to reach the content hidden by the footer. It seems to be an bug in webkit with installed App's on mobile devices.

## Simple demo PWA
https://dstester.github.io/ElementsMovingWithFixedPosition

## Description
May be connected to this webkit bug https://bugs.webkit.org/show_bug.cgi?id=218465

It seems to be connected to the value of visualViewport.height. After the keyboard usage and rotation the value is to low.
On my iPad the value should change from 717 to 1282 on rotation, but it changes to 980.
Also the value of visualViewport.pageTop only changes after the touchend event. Usualy the value gets updated immediately on scrolling.
Once you opened the keyboard in portrait the problem disappears. The height gets the right value and the pageTop gets updated immediately again.
This does not happen in Safari.
At first it seemed to no big deal. Who rotates the ipad in that specific order after keyboard usage, right? But after we got in production with our new App, the first 5 User we started with, reported all this bug in the first two week. So i guess it is a only an annoying problem, but a real problem.
You can see the demo in the attached short video (Also on Github: https://github.com/DSTester/ElementsMovingWithFixedPosition/raw/main/ExampleVideo.mp4).

Simple sourcecode to reproduce this problem can be found on github: https://github.com/DSTester/ElementsMovingWithFixedPosition

I don't know how to test this with the latest webkit build and the iOS-Simulator. So for now i report this as described and will add information as i got familiar with build webkit, Xcode and the iOS-Simulator.

## Tested with
* iPad 8.Gen, MYMH2FD/A, iPadOS 15.1 => happens
* iPad Air, MD791FD/A, iOS 12.5.5 => happens
* iPhone SE, MP822DN/A, iOS 15.1 => happens
* iPad Air 4, iOS 15.2 Beta 3 (19C5044b) => happens
* iOS-Simulator, iPad 9. Gen., iOS 15.0
* some other devices i have no detailed data at this moment => happens