[Webkit-unassigned] [Bug 276618] New: Cursor jumps/flashes outside of autogrowing textarea on smooth scroll

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Mon Jul 15 11:44:44 PDT 2024


https://bugs.webkit.org/show_bug.cgi?id=276618

            Bug ID: 276618
           Summary: Cursor jumps/flashes outside of autogrowing textarea
                    on smooth scroll
           Product: WebKit
           Version: Safari 18
          Hardware: All
                OS: All
            Status: NEW
          Severity: Major
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: nisala at getbaseline.app
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 471887

  --> https://bugs.webkit.org/attachment.cgi?id=471887&action=review

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240715/183bea57/attachment-0001.htm>


More information about the webkit-unassigned mailing list