iOS mobile: keyboard up/down and scrolling behaviour not working

[giancarloerra]

Issue summary

Exploring all the possible examples, even the last one https://terminal.jcubic.pl/android.php, the behaviour on iOS mobile is not working: virtual keyboard going on and off doesn't get the last line (the prompt) scrolling up and down so that's never covered when keyboard is up.

Expected behavior

The bottom of the terminal, where terminal is, should always be automatically attached to the bottom of the visible view, without or without keyboard.

Actual behavior

Keyboard going up (once the screen is full of lines and after has been up and down once), covers the terminal. The terminal should always automatically scroll to the bottom, be attached to the keyboard popping up/down, and keep like that while typing a command (or prompt in focus) or when executing a command.

Steps to reproduce

Simply loading the latest demo https://terminal.jcubic.pl/android.php on iOS, making the screen full of commands so it scrolls down, keyboard up and down and then up again, it covers the bottom of the terminal/view.

Browser and OS

Latest iOS, Safari or Firefox (both using WebKit anyway).

Additional notes

[giancarloerra]

For now my nearest solution is:

const scrollToCmd = () => {
	let element = document.querySelector(".cmd");
	element.scrollIntoView();
}

and this listener

$(document).ready(function () {
	visualViewport.addEventListener("resize", () => {
		scrollToCmd();
	});
});

And in theory it seems to work. Problem is that when typing a command it scrolls up automatically as there seems to be something else bringing up the scroll to a point where is not aware of the virtual keyboard.

I tried this to mitigate:

		onCommandChange : function () {
			scrollToCmd();
		},

And it shows clearly that is fighting something else that brings the scroll up to to where it would be without the virtual keyboard: typing letters slowly, the focus/scroll goes briefly up and is then dragged down again to the correct position by the scrollToCmd().

If we could get rid of whatever is fighting this scrollToCmd(), this solution I believe could work.

[giancarloerra]

There's an additional bug happening once you have a long terminal and keyboard up/down a few times and scrolling etc.

A part of the body background colour is showing "behind" (or at the bottom) of the terminal.

Images of keyboard covering the content:

And the black terminal showing the body behind (white):

[jcubic]

Yes, this is a known issue see #707.

The problem is that on iOS the keyboard doesn't affect the layout size inside CSS. In the recent version of Chrome, they duplicated the "broken" behavior of Safari. So now for every mobile browser you need to use JavaScript to detect the virtual keyboard and it's not easy. See #859.

There is also a long-standing bug in mobile Safari with white space below the HTML, and I don't see a way to fix this. I think that the new Chrome added that bug to their implementation.

See this question on StackOverflow: White space outside HTML on mobile Safari when the keyboard is open

So the problem are bugs in the browsers that now become the standard.

I will try to attempt to fix this issue again. I need to find the code I was using to hack the new Chrome behavior, maybe it will work for iOS.

On Chrome you only need to add a special viewport meta tag. But on Safari I'm afraid this is default behavior and I don't think they will ever fix this.

If you know how to fix broken mobile browsers I'm all ears.

[jcubic]

I will check how your Scrolling into view behaves.

[giancarloerra]

Thank you. I confirm that the white space (in my case the background colour of body in place of background image) happens only in Safari, not Chrome (or it's hidden more quickly).

Thanks for checking those code snippets...they solve the problem of the keyboard up/down and bottom of the terminal (cmd) following it, so the keyboard does not cover anymore. It works on Chrome and Safari.

But the up/down remains, so there's something somewhere else that tries to scroll: if you can find where that is and try to disable it and see it that fixes it, maybe that could be a solution if it doesn't break anything else.

Thanks, much appreciated.

[jcubic]

The problem with scrolling up the content is that the page height is the full height of the phone and if you open the keyboard, the thing that makes the keyboard open is at the bottom of the page. Even if the height is 100% the page is bigger than the size of the available area. This is a broken behavior of Safari that is now duplicated by Chrome, which is really bad.

I've reported this two times to the Chrome team they said this is how it should work. Because they do the same what Safari is doing. This is really stupid but I nothing I can do.

I can only do hacks in JavaScript to fix broken behavior.

The reason why they think it's okay is because no one needs a full-height mobile app like the one I need for jQuery Terminal. They only care about normal websites where this works fine.

[giancarloerra]

It sounds like it's not going to be fixed (by them) anytime soon, not surprised, but if Chrome is following then maybe JS hacks is the way?

The one I did is a hack but it 'works' solving half of the problem, I wonder if you have a way to make it work also when typing letters in the terminal, because that's the only problem left.

With my hacks when you get focus on the terminal and the keyboard slides up, the terminal is nicely pushed up, and down, it all works nicely...but when typing, the up/down happens.

Just wondering if worth going down the hack route if it works most of the times.

[jcubic]

It seems that my old demo works for Chrome on iOS (that it's Safari with different branding), but not for Real Safari. iOS is a real mess. And there no dev tools of any kind on BrowserStack to debug Safari on iOS.

[jcubic]

Ok, I was able to run the Dev Tools on the browser Stack. And I think I have a working PoC of the code:

https://terminal.jcubic.pl/android.php

Can anyone check (on a physical iPhone) if it works? The code is not yet in the repository.

[bsidhom]

I can confirm that this works as expected on a physical iPhone.

[bsidhom]

Do you have link to the code so we can experiment with it? Did this require internal changes to the terminal itself or did you just use the public API/CSS? I can read the source on the page, but it's not clear what the significant changes are to get this working.