Bug 202489 - Box-shadow spread radius does not transition or animate correctly with CSS Transitions & Animations
Summary: Box-shadow spread radius does not transition or animate correctly with CSS Tr...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: All macOS 10.14
: P2 Normal
Assignee: Simon Fraser (smfr)
URL: https://codepen.io/kbav/pen/eYOqKBQ?e...
Keywords: BrowserCompat, HasReduction, InRadar
Depends on:
Blocks:
 
Reported: 2019-10-02 12:59 PDT by Kyle Bavender
Modified: 2019-11-19 03:33 PST (History)
18 users (show)

See Also:


Attachments
Patch (42.15 KB, patch)
2019-11-05 16:57 PST, Simon Fraser (smfr)
zalan: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Kyle Bavender 2019-10-02 12:59:35 PDT
I am conducting browser tests on Safari and found that its behavior when rendering box-shadow spread-radius between two different values in a CSS (keyframes) animation does not match that of Chrome/Firefox/IE/Edge. It appears to also be an issue with CSS Transitions.

I am not familiar with this detail of the box-shadow or animation specifications, but the (would one call this sub-pixel rendering, or tweening?) behaviors exhibited by other browsers make for markedly cleaner animations.

My test case and examples can be found here: https://codepen.io/kbav/pen/eYOqKBQ?editors=0100#0

Tested in Safari Technology Preview, 13, 12, 11, & 10. Other browsers are using the latest public versions as of this writing. Let me know if I can provide any further detail or assistance.
Comment 1 Radar WebKit Bug Importer 2019-10-04 17:08:05 PDT
<rdar://problem/55999988>
Comment 2 Ken Hawkins 2019-10-31 04:23:24 PDT
We've also noticed the issue with "sub-pixel stutter" on box-shadow animation in Safari. (So far confirmed in Mac OS 10.14 Safari Version 12.1.2 (14607.3.9) and Mac OS 10.15)

Our demo of the issue: https://codepen.io/khawkins98/pen/ZEEaBME

We've tried the usual `transformZ` and `will-change` techniques and none have helped.
Comment 3 Simon Fraser (smfr) 2019-10-31 10:58:30 PDT
Could you file that stutter as a new bug please.
Comment 4 Simon Fraser (smfr) 2019-11-04 18:08:47 PST
We store and animate the spread value as an int, and it should be floating point.
Comment 5 Simon Fraser (smfr) 2019-11-05 16:57:59 PST
Created attachment 382864 [details]
Patch
Comment 6 zalan 2019-11-06 10:24:45 PST
Comment on attachment 382864 [details]
Patch

v.nice
Comment 7 Simon Fraser (smfr) 2019-11-06 16:41:49 PST
https://trac.webkit.org/r252161
Comment 8 Truitt Savell 2019-11-07 10:00:18 PST
It looks like the changes in r252161 caused 3 tests to time out on Mac and iOS:

transitions/multiple-shadow-transitions.html 
transitions/cubic-bezier-overflow-shadow.html 
legacy-animation-engine/transitions/cubic-bezier-overflow-shadow.html

I was able to reproduce these timeouts using command:

run-webkit-tests transitions/multiple-shadow-transitions.html transitions/cubic-bezier-overflow-shadow.html legacy-animation-engine/transitions/cubic-bezier-overflow-shadow.html --iterations 20 -f

They reproduce on r252161 but not r252160.

Tracking in: https://bugs.webkit.org/show_bug.cgi?id=203966
Comment 9 Simon Fraser (smfr) 2019-11-07 13:09:11 PST
Fixed in https://trac.webkit.org/changeset/252203/webkit
Comment 10 Kyle Bavender 2019-11-08 06:44:29 PST
I re-tested the attached test case URL/CodePen with Webkit r252161; while the spread animation isn’t quite as smooth as Chrome or Firefox’s (it appears they do something akin to anti-aliasing / allowing subpixel values to spread with partial opacity), it’s definitely a smoother animation overall.

Thank you Simon & the WebKit team for addressing this!
Comment 11 Antoine Quint 2019-11-19 03:33:28 PST
This caused a regression, see https://bugs.webkit.org/show_bug.cgi?id=204348.