Bug 173708

Summary:

Outline-width with transition don't animate correctly

Product:

WebKit

Reporter:

zyuzin.vitaly

Component:

Animations

Assignee:

Antoine Quint <graouts>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

changseok, darin, dino, esprehn+autocc, ews-watchlist, firefoxic.dev, glenn, graouts, graouts, koivisto, kondapallykalyan, midnight.mongrel, pdr, rajsite, rego, riktika_sharma, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 10

Hardware:

Mac

OS:

Unspecified

URL:

https://codepen.io/juwain/pen/EEazwx

Attachments:

Description	Flags
Test case to reproduce the issue	none
Patch	none
Patch	none
Patch for landing	none

zyuzin.vitaly

Reported 2017-06-22 03:20:54 PDT

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.

Attachments
Test case to reproduce the issue (299 bytes, text/html) 2021-11-25 04:10 PST, Manuel Rego Casasnovas	no flags	Details
Patch (1.95 KB, patch) 2022-03-02 00:31 PST, Antoine Quint	no flags	Details Formatted Diff Diff
Patch (4.33 KB, patch) 2022-03-02 00:45 PST, Antoine Quint	no flags	Details Formatted Diff Diff
Patch for landing (4.70 KB, patch) 2022-03-02 09:16 PST, Antoine Quint	no flags	Details Formatted Diff Diff
Show Obsolete (2) View All Add attachment proposed patch, testcase, etc.

zyuzin.vitaly

Comment 1 2018-03-10 12:36:26 PST

(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

Comment 2 2021-11-25 04:10:45 PST

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

Comment 3 2021-11-25 04:13:15 PST

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

Manuel Rego Casasnovas

Comment 4 2021-11-25 04:18:49 PST

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

midnight.mongrel

Comment 5 2022-02-21 15:02:48 PST

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

Comment 6 2022-03-01 14:02:53 PST

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)

Comment 7 2022-03-01 15:25:47 PST

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

Antoine Quint

Comment 8 2022-03-02 00:31:39 PST

Created attachment 453577 [details] Patch

Antoine Quint

Comment 9 2022-03-02 00:45:56 PST

Created attachment 453579 [details] Patch

Simon Fraser (smfr)

Comment 10 2022-03-02 08:38:12 PST

Comment on attachment 453579 [details] Patch Code change looks good but this needs to be a repaint test.

Antoine Quint

Comment 11 2022-03-02 09:16:12 PST

Created attachment 453624 [details] Patch for landing

EWS

Comment 12 2022-03-02 10:48:31 PST

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

Comment 13 2022-03-02 10:49:15 PST

<rdar://problem/89698716>

Darin Adler

Comment 14 2022-03-02 11:04:50 PST

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.

alan

Comment 15 2022-03-02 11:14:54 PST

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

Comment 16 2022-03-02 11:17:48 PST

The changelog went stale. This landed with a test.

Antoine Quint

Comment 17 2022-03-02 13:41:00 PST

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

Note You need to log in before you can comment on or make changes to this bug.