New viewport units don't work on iOS

[emilio]

They work on Safari and Chrome on iOS. There are new APIs that should be used to make this work:

• https://developer.apple.com/documentation/webkit/wkwebview/3974127-setminimumviewportinset?language=objc
• https://github.com/WebKit/WebKit/blob/3197e7a821f6af5a0f5ab9ac654718668d7a82e4/Source/WebKit/UIProcess/API/Cocoa/WKWebView.h#L628

┆Issue is synchronized with this Jira Spike

[data-sync-user]

➤ Razvan Litianu commented:

Hi Winnie Teichmann, can you please give an example where this happens? And possibly a counter example from Chrome/Safari?

[dholbert]

It looks like https://bokand.github.io/demo/urlbarsize.html is one demo that shows the behavior difference. Try viewing that page in Firefox vs. Safari/Chrome on iOS.

In Firefox, the colorful bars at the bottom-right are all the same height as each other (initially as well as after you scroll). In Safari/Chrome, the rightmost two blue bars and the rightmost two brown bars are taller than the others at initial load; and various bars get taller when you scroll (as the dynamic toolbar goes offscreen and the viewport gets larger).

[bramus]

@dholbert FYI: There’s a bunch of demos available on https://interop-2022-viewport.netlify.app/ for you to test all these, as part of last year’s Interop2022 Viewport Investigation.

More specifically https://interop-2022-viewport.netlify.app/combined/viewport-units/ – which is an updated version of bokan’s demo – is relevant here.

Related: Firefox (both on iOS and Android) resize the ICB when the Virtual Keyboard gets shown. Chrome on Android also used to do that, but no longer does as of version 108 and now lines up with Safari on iOS. This ICB resizing might need to be tackled first, as the Viewport Units are derived from them.

[jteppinette]

Related, when opening a new tab and the bottom search bar has been minimized (by scrolling down), the new tab will be created with incorrect viewport height, until a scroll event occurs.

This impacts anything positioned relative to the viewport. i.e. items positioned at bottom of the viewport will be below the search bar and invisible.

[dholbert]

Related: Firefox (both on iOS and Android) resize the ICB when the Virtual Keyboard gets shown. [...] This ICB resizing might need to be tackled first, as the Viewport Units are derived from them.

I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1826410 on this, for what it's worth. (It might already be covered by some other issue; if so, we'll dupe it over.)

[data-sync-user]

➤ Laurie Marceau commented:

Turning this ticket into a spike to document finding and path forward to implement the view ports within our app.

[data-sync-user]

➤ Razvan Litianu commented:

This is the link ( https://docs.google.com/document/d/1Hki9FFjGe8Jsz72Rjqi0R1vB6LcrJFxcVNZfsNHnCuQ/edit?usp=sharing ) to my findings. I couldn’t find a solution yet.

[dyviknilsen]

This issue still persists; svh and lvh act like dvh, which is unfortunate as more and more websites are adopting dynamic viewport units e.g. to position and trigger scroll-based animations. These still break in Firefox.

[PullRequestTimeout]

It's been 789 days. The horrors persist, but so do I.

[atsakiridis]

Any updates here, this is still happening with latest firefox on iOS