Chrome/Android - when editor has an horizontal scrollbar it scrolls to the right even when the caret is within the viewport

[ggrossetie]

Sorry for the long title but it's hard to explain!
Here's a short screencast to showcase this issue:

As you can see, when I click on an empty line (line 4), it scrolls to the right.
As a result the cursor is underneath the gutter (line numbers).

And when I click on the first line just after the word "long", it also scrolls to the right even though the caret was within the viewport.

I'm using Chrome 98.0.4758.101 on Android 12. The video was recorded using remote debug and the text editor on the https://codemirror.net/6/ page.

It seems that Chrome somehow ignores the gutter and tries to align the text to the left edge.

[marijnh]

The weird thing is that, though it looks like the editor is scrolling horizontally, its scrollLeft does not change. So most likely this is triggering some kind of horrible kludge in Chrome, intended for who-knows-what situation, and it may take a bit of research to figure out how to work around it.

[ggrossetie]

Yes... this is also specific to Chrome/Android. It seems that the browser tries to center/align the content editable element, maybe to prevent some dark patterns where you would type on a non-visible element?
Anyway, I didn't find any hint while doing some research online so I can only guess 😞

[a1ooha]

Same problem, any updates? @marijnh

[bushev]

Guys, I have the same issue on Android 11.

[marijnh]

I think at this point our best bet is to try and reduce this to the minimal DOM structure that triggers it, and report it as a Chrome bug, since the chances of being able to work around it in the library aren't looking good. Anyone want to work on that?