Browser issue Firefox for Android: Scrolls too far when clicking first line of editor

[Steffen]

Affected version

2.1.7

This is probably somehow related to the following resolved bug but not exactly the same (only Firefox seems to be affected and other details may vary): Editor contents scrolled out of sight when focusing editor with lots of text.

How to reproduce: Use Firefox for Android 68 or Firefox for Android Preview and edit a post (it probably needs more than a few lines of text, see thread with demo post). After the editor has loaded, click its first line.

What should happen: The first line (which is the one that was clicked) should stay visible after the editor has received focus.

What actually happens: The first line (which is the one that was clicked) is scrolled out of sight after the editor has received focus.

 

[Mike]

I've spent a fair amount of time looking into this and it turns out the scrolling is an internal Firefox behavior. It appears to trigger scrolling when focusing on inputs and contenteditable areas. I can actually reproduce the issue with just a textarea.

This is actually caused by the fixed header more than anything. The cursor is on-screen, just obscured. There is a related scroll-margin CSS property which is quite new, but I think it would workaround this. However, it looks like Firefox doesn't respect this for some of their internal behviors. I think this is likely the relevant bug:

1597769 - scroll-margin is not respected when typing into an offscreen textarea

NEW (nobody) in Core - Layout: Scrolling and Overflow. Last updated 2022-10-11.

bugzilla.mozilla.org

I'm experimenting with adding a scroll-margin-top to .input, .fr-element to allow them to be pushed below the header, though it's not entirely clear how Firefox might trigger the scrolling for contenteditable so it might need tweaking. However, that is likely a moot point as long as that FF bug is open.