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.