| Summary: | iOS: visualViewport.height unreliable in standalone PWA mode | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Andrea Giammarchi <andrea.giammarchi> | ||||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | NEW --- | ||||||||
| Severity: | Normal | CC: | appleipadbetatester, bfulgham, david_quesada, j.graseec, john.crim, simon.fraser, smoley, stephen, thorton, v.o.sazonov, webkit-bug-importer, zalan | ||||||
| Priority: | P2 | Keywords: | InRadar | ||||||
| Version: | Safari 14 | ||||||||
| Hardware: | iPhone / iPad | ||||||||
| OS: | Unspecified | ||||||||
| Attachments: |
|
||||||||
|
Description
Andrea Giammarchi
2020-11-16 07:10:25 PST
Thanks Andrea, I can reproduce this on iOS 13.6.1 as well as the current 14.3 beta. yes, also met with this problem :( Is it possible to solve it? :( Created attachment 445413 [details] Example PWA sourcecode to reproduce, includes example video and screenshot https://github.com/DSTester/ElementsMovingWithFixedPosition Created attachment 445414 [details] Example PWA sourcecode to reproduce https://github.com/DSTester/ElementsMovingWithFixedPosition 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 |