Google Chrome 108 broke the library on mobile

[jcubic]

Issue summary

Google Chrome in version 108 changed the way height: 100% works on body and HTML tags. And now the library is broken. The fix works on BrowserStack but not on my real phone

Steps to reproduce

1. Open Full Screen Terminal on Android
2. Open the keyboard
3. The page scrolls up

Browser and OS

Android, Google Chrome >=108

Additional notes

Here is a demo with an attempted fix that doesn't work:
https://codepen.io/jcubic/pen/LYBaQOJ?editors=0100

[jcubic]

It seems that the problem is with Android <=8, I was able to reproduce it on BrowserStack (with Pixel 2).

For new Android you can use:

body {
   height: 100dvh;
}

to set a dynamic viewport. On Android <=8 it doesn't work, but I've found a hack:

window.addEventListener('resize', () => {
    const { height } = window.visualViewport;
    document.documentElement.style.setProperty('--terminal-force-height', height);
});

and in CSS you can use:

body {
    height: calc(var(--terminal-force-height, 100dvh) * 1px);
}

The issue was reported to Google Chrome #1413453

[cowuake]

It seems that the problem is with Android <=8, I was able to reproduce it on BrowserStack (with Pixel 2).

For new Android you can use:

body {
   height: 100dvh;
}

to set a dynamic viewport. On Android <=8 it doesn't work, but I've found a hack:

window.addEventListener('resize', () => {
    const { height } = window.visualViewport;
    document.documentElement.style.setProperty('--terminal-force-height', height);
});

and in CSS you can use:

body {
    height: calc(var(--terminal-force-height, 100dvh) * 1px);
}

The issue was reported to Google Chrome #1413453

The dynamic-viewport workaround is not propertly working on Android 13 (neither with Firefox nor with Chromium-based browsers), simply because the --terminal-force-height hack gets in the way: if you don't zoom on the page all is OK, but as soon as you pinch-zoom, a 'resize' event is triggered and the terminal height changes accordingly. Since the new height is that of visualViewport, if you scroll up and down you see the terminal height does not span all the scrollable area: a white area appears below.

I've tried to come up with something that preserves the hack, while taking into account the scale problem.
Essentially, I read from visualViewport not only the height but also the scale, multiply one value by the other, and round the result before setting the terminal area height.
I'm testing this solution on mobile with the Schemius web client, which points to this commit on my jquery.terminal fork.
Not sure if the resulting behavior is entirely consistent with the ultimate goal. For instance, I see a slight up-scroll if the scrollbar is already at play and the virtual keyboard is invoked. The white area under the terminal is gone though, for both the virtual-keyboard and the pinch-zoom cases.
@jcubic, could you please provide some feedback? Could we consider my little effort a valid fix? I'm not able to also test on iOS since I don't have access to any Apple devices.

[jcubic]

@cowuake I actually never use Zoom on mobile, that's why I didn't even try to fix this.

I would only change:

var scale = window.visualViewport.scale;
var height = Math.round(window.visualViewport.height * scale);

You can create PR to the devel branch and I will check on BrowserStack how it works on iOS.