Please, watch demo https://codepen.io/juwain/pen/jwwZzm. I have a button with zero-outline. I want to animate outline-width property of this button on hover. In Safari it does't animate. In Chrome, FF it animates correctly.
(In reply to zyuzin.vitaly from comment #0) > Please, watch demo https://codepen.io/juwain/pen/jwwZzm. > > I have a button with zero-outline. > I want to animate outline-width property of this button on hover. > > In Safari it does't animate. > In Chrome, FF it animates correctly. Test case is here https://codepen.io/juwain/pen/EEazwx
Created attachment 445135 [details] Test case to reproduce the issue Just one more test case to reproduce the issue, "outline" combined with "transition" has issues in WebKit.
*** Bug 213901 has been marked as a duplicate of this bug. ***
There's another example of this problem at https://focus-visible-examples.glitch.me/ (from https://bugs.webkit.org/show_bug.cgi?id=225148#c23). Apart from that there's a related bug report that maybe is caused by this same issue (see #199521).
Here is another example: https://codepen.io/m-akinc/pen/OJOZmzB I have also seen the same issue when trying to apply a transition to a box-shadow that behaves like an outline. I presume it's the same (or very closely related) root cause. I have reported this on webcompat.com as well: https://webcompat.com/issues/99978
This looks like a painting issue, I can see a bit of the animation running when hovering out but it looks like we're clipping much of the outline.
Seems like we're not recomputing visual overflow as the outline width changes.
Created attachment 453577 [details] Patch
Created attachment 453579 [details] Patch
Comment on attachment 453579 [details] Patch Code change looks good but this needs to be a repaint test.
Created attachment 453624 [details] Patch for landing
Committed r290735 (247982@main): <https://commits.webkit.org/247982@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 453624 [details].
<rdar://problem/89698716>
Comment on attachment 453624 [details] Patch for landing View in context: https://bugs.webkit.org/attachment.cgi?id=453624&action=review > Source/WebCore/ChangeLog:12 > + No new test for this, I'm not sure how to write one since the issue is failing to > + repaint during an animation but WKTR seems to force a repaint for reftests. I remember we had a type of test called a "repaint test". Not sure if they are still working, but we had some of them at one time. I remember Dan Bernstein working on one years back.
(In reply to Darin Adler from comment #14) > Comment on attachment 453624 [details] > Patch for landing > > View in context: > https://bugs.webkit.org/attachment.cgi?id=453624&action=review > > > Source/WebCore/ChangeLog:12 > > + No new test for this, I'm not sure how to write one since the issue is failing to > > + repaint during an animation but WKTR seems to force a repaint for reftests. > > I remember we had a type of test called a "repaint test". Not sure if they > are still working, but we had some of them at one time. I remember Dan > Bernstein working on one years back. We still do use them. LayoutTest/fast/repaint has many examples (Internals::startTrackingRepaints etc.).
The changelog went stale. This landed with a test.
(In reply to Simon Fraser (smfr) from comment #16) > The changelog went stale. This landed with a test. Apologies for the confusion. Simon had educated me about repaint tests on the WebKit slack and I failed to update the text in the ChangeLog.