Cursor displayed outside editor on iOS

[microbit-matt-hillsdon]

Found while investigating #457 but doesn't require use of the spacebar cursor movement feature so I've raised it separately.

1. On iOS/iPadOS using a narrow editor (e.g. https://7uzv4.csb.app/) type a line that requires horizontal scrolling.
2. Leaving the cursor at the end of the line, use your finger to scroll back to the beginning of the line.
3. The cursor is still visible outside of the editor area where you'd expect its position to be if there was no scrolling.

[microbit-matt-hillsdon]

This is fine on Chrome on Android. The cursor remains at the end of the line but is not visible. Typing scrolls to reveal the cursor.

[marijnh]

This is a Mobile Safari bug—it always draw the cursor, even when it is in a position that's scrolled out of view. You'll see the same in a plain contentEditable element. I don't think there's anything CodeMirror can do about this.

[elad-yosifon]

@marijnh any updates? is there a workaround?

[marijnh]

I am not aware of any workaround for this. It may be worth checking if clip-path: inset(0px) helps here, but I don't have an iPhone handy right now to test.

[marijnh]

Nope, that doesn't help either. It seems iOS Safari simply will not hide the cursor, regardless of whether it should be clipped by some parent node, and there is unfortunately little we can do about that.

It seems that the bug only occurs when the scrollable element is a parent of the editable element---if the element itself it scrollable, the browser does manage to clip the cursor. Unfortunately, making the scrollable element editable would cause a lot of problems in CodeMirror (users could put the cursor in the gutter etc), so that's not really an option.

I've stopped reporting bugs to Apple since they required a registered developer Apple ID to even be able to do that, but if someone wants to try and report this again, there's a slim chance someone will eventually look at it.