[Webkit-unassigned] [Bug 241362] New: animating the outline-width with transition on a textarea element makes the text janky

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Mon Jun 6 22:30:52 PDT 2022


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

            Bug ID: 241362
           Summary: animating the outline-width with transition on a
                    textarea element makes the text janky
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Mac (Apple Silicon)
                OS: macOS 12
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: karlcow at apple.com
                CC: dino at apple.com, graouts at apple.com

Created attachment 460058

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

test case demonstrating the issue

Steps to reproduce
1. Open the test case textarea-jumpy-text.html
2. Put the cursor over the text
3. Look at the text

Expected:
The outline grows around the text which is stable.

Actual:
The outline grows but the text becomes suddenly junky, vibrating.

Notes:
1. It doesn't reproduce on iOS 15.5
2. It doesn't reproduce on macOS Firefox and Chrome latest versions.
3. Initially reported on https://github.com/webcompat/web-bugs/issues/99978


Code of the test case. `transition: outline-width 1s;`

```html
    <style>
      body {
        padding: 30px;
      }
      textarea {
        outline-style: solid;
        outline-width: 0px;
        transition: outline-width 1s;
        width: 30ch;
        height: 5ch;
      }

      textarea:hover {
        outline-width: 20px;
      }
    </style>
  </head>
    <textarea>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam eaque itaque repellat, molestiae, dolore expedita exercitationem voluptas modi consequatur ipsa cum ea similique aliquid aspernatur dolores debitis veritatis autem illo?
    </textarea>
```

-- 
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/20220607/f154e0ed/attachment-0001.htm>


More information about the webkit-unassigned mailing list