Page scroll to top when starting writing on cmd line on mobile.

[AlexandrosAlexiou]

Issue summary

On mobile, If you write a lot of commands and the page gets bigger, you need to scroll to bottom to see the command line because the virtual keyboard hides it. Then when writting new commands the page automatically scrolls to top and you need to scroll to bottom to see the command line again.

Expected behavior

The page should stay focused on the current command line cursor

Actual behavior

The page auto scrolls to top when writing

Steps to reproduce

1. just create a simple page with this code:
   jQuery(function ($, undefined) { var term = $("body").terminal(); });

2. host this locally e.g. using liveserver on vs code.

3. Execute commands to get the page bigger. Scroll to bottom to see the command line. Then write something again. The page will scroll to top automatically.

Browser and OS

Chrome, Firefox on iOS 15.1

[jcubic]

I cannot reproduce it, it works fine on my end in Chrome on Android.

Can you test 404 error page?

[AlexandrosAlexiou]

You are right. Android works as expected. iOS tho has the behavior mentioned above. For example if i spam just enter the output goes under the keyboard and the page doesnt auto scroll to bottom so that i can see the command line with the blinking cursor. If i scroll my self to the bottom and start spamming again the page autoscrolls to top.

you can see this behavior here: https://www.youtube.com/shorts/i_IhqV2Khyw

[jcubic]

I can confirm this on BrowserStack.

[AlexandrosAlexiou]

I am really interested in fixing this bug, but since this only happens in iOS i cant think how to approach the solution. How would you debug this? Any suggestions in general?

[jcubic]

just searching and testing in devTools if the solution found on the internet works.

[AlexandrosAlexiou]

just searching and testing in devTools if the solution found on the internet works.

Any news on this? Possible ways to debug this?

[jcubic]

Sorry, it don't have any solution. I was trying few things and was not able to find any. I also have issue with scrollbar even on Android, but that's maybe with my demo.

[jcubic]

I think I have two demos on the server, and android.php and android.html. html version works fine on Android. This simplify things.

[jcubic]

@AlexandrosAlexiou can you check one thing if you have access to physical iPhone?

This is basic html https://terminal.jcubic.pl/mobile.html can you check if you have spaces below body like on BrowserStack? It looks like a bug but it may be BrowserStack.

If this works fine on iPhone I will be able to focus on just the scrolling.

[AlexandrosAlexiou]

@AlexandrosAlexiou can you check one thing if you have access to physical iPhone?

This is basic html https://terminal.jcubic.pl/mobile.html can you check if you have spaces below body like on BrowserStack? It looks like a bug but it may be BrowserStack.

If this works fine on iPhone I will be able to focus on just the scrolling.

Yes, checked with a physical iPhone. This white space appears just like in BrowserStack.

[jcubic]

This is really problematic it's like a basic thing, I hope that this is a bug that can be fixed. First I need to get rid of that space, then I will try to fix the issue with scroll_to_bottom() function.

If it's the same as on BrowserStack I will try to handle this myself. But if you can (if I fix the issue) test on a real device that would be great. The last time I've had an issue with mobile it took months to fix because no one was willing to test it. It was before I've found BrowserStack, they provided a free account for Open Source projects.

[AlexandrosAlexiou]

Sure, happy to can help. This is a really nice library, I like it a lot and I would like this to run on iOS devices properly :)

[jcubic]

Do you have a problem enabling the terminal and opening the virtual keyboard on Safari? I have a really hard time enabling the keyboard on BrowserStack and it ends up in a weird state when key events are not triggered because the terminal is disabled, but I can type into the terminal.

[AlexandrosAlexiou]

The virtual keyboard works fine, no weird behavior. But content goes under the virtual keyboard. In android it seems that the page is being pushed up by the keyboard, but in ios it seems that this is not the case.

[jcubic]

I've worked a bit on this issue in BrowserStack, but I don't remember what was the outcome, I think it was working much better, but I was not able to fully resolve the issue.

[AlexandrosAlexiou]

Updating to the latest version 2.31.1, I can see that the issue is still there unfortunately...

[jcubic]

Yes, I didn't say that it was released. I was working on detecting virtual keyboard on iPhone in
android.html file.

[AlexandrosAlexiou]

Looking at the example above i can see that it scrolls to the bottom, but still the prompt is under the keyboard and sometimes it goes again to the top... why is it such a nightmare in iOS, android works perfectly...

[jcubic]

Maybe iOS sucks because Apple doesn't care. It's really a pain to create a working solution for mobile.

Anyway, I will try to solve the issue, I think that the only option is to use JavaScript. I said that I'm closer because I was able to detect the height of the page on iOS (without the keyboard), the problem is that it doesn't work for Android, so I will probably need to use User-Agent sniffing to detect iOS and apply that JavaScript only for Apple OS.

It may take quite some time to fix unless someone will be able to help. There is only a need to detect the height of the screen without the virtual keyboard that will work on both Android and iOS.

I will play with it again and see how it will go, it's a slow process.

[jcubic]

For future reference (SO questions):

• Virtual keyboard covers html element in Safari on iOS
• Get viewport height when soft keyboard is on
• Scroll to top not working for safari

Document by Bramus

• viewport-resize-behavior

[jcubic]

This has been a while but when fixing the issue with Chrome 108 (#859) which changed the behavior of the viewport. I was able (I think) to fix the issue with Mobile iOS.

The fix this time is on this page https://terminal.jcubic.pl/android.php (PHP extension).