Bug 276618 – Cursor jumps/flashes outside of autogrowing textarea on smooth scroll

• Status: NEW
• Component: Layout and Rendering

[Nisala]

Created attachment 471887 [details]
Recording of reproduction on iPhone 12 mini, iOS 17.5.1

Under the following conditions (as best as I can tell):
- Textarea on a page, automatically re-sized using an invisible element overlaid onto it with CSS Grid (other resizing methods untested but could probably also cause the bug)
- Textarea is in a scrollable container of some kind (I believe a scrollable container is required and it won't work if scrolling is done on window, but I'm not 100% sure)
- Scrollable container is scrolled using JS scroll functions, with behavior set to "smooth"

When you reduce the size of the textarea while typing (i.e. press backspace), the cursor jumps vertically between its actual position and a position outside of the textarea.

Because this is a bug that only shows up under very specific conditions, I've created a full reproduction:
- Live at https://nkalupahana.github.io/textarea-scroll-bug-repro/
- Source at https://github.com/nkalupahana/textarea-scroll-bug-repro/blob/main/index.html

In this reproduction, the page is scrolled using JS every time the enter button is pressed. Thus, to see the bug:
- Navigate to the reproduction page.
- Check "autoscroll" and "smooth scroll". (These checkboxes were added to show that, if they aren't checked, the bug doesn't appear. That is to say, without JS scroll, and without behavior set to smooth, the bug doesn't appear.) (However, if you ever check smooth scroll and reproduce the bug, even if you uncheck it and then try again, the bug will still be there, up until you refresh the page.)
- Press enter ~20 times.
- Press backspace repeatedly. By the time the cursor reaches the top of the page, you will start seeing the cursor jump. If you start typing normally while the cursor is jumping, it will continue to jump, while moving horizontally with the text you're typing in the textarea.

Expected results: cursor stays in textarea, tracking the text that's inserted as normal.
First encountered: iPhone 12 mini, iOS 17.5.1

[Radar WebKit Bug Importer]

<rdar://problem/131779929>

[Nisala]

Following up on this -- this bug is still present in iOS 18.1.