[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


            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

The outline grows around the text which is stable.

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

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;`

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

      textarea:hover {
        outline-width: 20px;
        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?

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