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

[cybernagl]

Pretty please fix the viewport handling in Firefox mobile? All the other browsers support lv* sv* and dv* correctly

[acki]

This utter **** is open for 1.5 years now, wtf?
The more rubbish is actually, FFM interprets the 100lvh und 100svh but acting like 100dvh, so you can't even work around the classic CSS non-support way in like you put two or three definitions together and every browser picks up the best he can support...

Here is a hacky solution I worked out today (feels a bit like the old Internet Explorer days, where you spent hours for just one fix the browser won't follow any standards...):

CSS:

.element { height: 100vh; height: 100lvh }
@supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 991px) {
        .element { height: calc( var( --vh, 1vh ) * 100 ); }
    }
}

JS:

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.screen.height * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
    // We execute the same script as before
    let vh = window.screen.height * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
});

[jharrje]

This issue has caused me great mental torment :)

[Cap0n3]

Yep, same here... 100svh is behaving the same way as 100dvh on Firefox for iOS. WTF.