Cursor issues on mobile

[jcubic]

Issue summary

Cursor position don't work 100% correctly.

1. One issue is that opacity on content editable don't work properly.
2. The editable area is not exactly in same place as command line.
3. When there are no command, cursor is at the beginning of prompt.
4. When cmd is not at bottom, the cmd and editable area don't overlap.
5. Adding shift+enter cursor don't move to next line.

Steps to reproduce

Demo https://terminal.jcubic.pl/lips.php

First issue is solved in demo that add extra css.

Browser and OS

Android

[noon2a]

.

[jcubic]

@noon2a if you want to be notified about issue there is subscribe button on the right.

[rabbithops]

Your original issue references Andoid, but this is a problem on iOS as well.
With enough repeated clicks near the cursor, I can get the keyboard to come up, but the clickable area is either too small or not placed correctly.
I have a lot of different iOS devices and can assist with QA if needed.

[jcubic]

@rabbithops Yes, it's the same code I don't expect on iOS to work differently, when the fix will be added and tested on Android it should automagically work on iOS too.

[jcubic]

@rabbithops if you have a real iOS device you can check one thing. I was wondering how it works with the new Safari padding thing. explained in this article: https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Can you create a screenshot how the full-screen terminal looks like on iPhone? I have access to BrowserStack but it doesn't look like real iPhone.

[jcubic]

Fix the demo, it was using some old file that caused JS error and white page.