Bug 241362 – animating the outline-width with transition on a textarea element makes the text janky

• Status: NEW
• Component: Animations

[Karl Dubost]

Created attachment 460058 [details]
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>
```

[Radar WebKit Bug Importer]

<rdar://problem/94493738>

[Karl Dubost]

Tested on Safari (18614.1.14.1.15) and reproducible.
https://bug-241362-attachments.webkit.org/attachment.cgi?id=460058

[Karl Dubost]

This is still happenning on a retina screen.