Bug 173708 – Outline-width with transition don't animate correctly

• Component: Animations
• Status: RESOLVED FIXED

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

[Manuel Rego Casasnovas]

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.

[Manuel Rego Casasnovas]

*** Bug 213901 has been marked as a duplicate of this bug. ***

[Manuel Rego Casasnovas]

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

[Antoine Quint]

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.

[Simon Fraser (smfr)]

Seems like we're not recomputing visual overflow as the outline width changes.

[Antoine Quint]

Created attachment 453577 [details]
Patch

[Antoine Quint]

Created attachment 453579 [details]
Patch

[Simon Fraser (smfr)]

Comment on attachment 453579 [details]
Patch

Code change looks good but this needs to be a repaint test.

[Antoine Quint]

Created attachment 453624 [details]
Patch for landing

[EWS]

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].

[Radar WebKit Bug Importer]

<rdar://problem/89698716>

[Darin Adler]

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.

[zalan]

(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.).

[Simon Fraser (smfr)]

The changelog went stale. This landed with a test.

[Antoine Quint]

(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.