Summary: | Box-shadow spread radius does not transition or animate correctly with CSS Transitions & Animations | ||||||
---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Kyle Bavender <kyle.bavender> | ||||
Component: | CSS | Assignee: | Simon Fraser (smfr) <simon.fraser> | ||||
Status: | RESOLVED FIXED | ||||||
Severity: | Normal | CC: | dino, dstockwell, esprehn+autocc, ews-watchlist, glenn, graouts, graouts, gyuyoung.kim, khawkins98, kondapallykalyan, kyle.bavender, macpherson, menard, mmaxfield, pdr, simon.fraser, tsavell, webkit-bug-importer, zalan | ||||
Priority: | P2 | Keywords: | BrowserCompat, HasReduction, InRadar | ||||
Version: | Safari Technology Preview | ||||||
Hardware: | All | ||||||
OS: | macOS 10.14 | ||||||
URL: | https://codepen.io/kbav/pen/eYOqKBQ?editors=0100 | ||||||
See Also: |
https://bugs.webkit.org/show_bug.cgi?id=203966 https://bugs.webkit.org/show_bug.cgi?id=204348 |
||||||
Attachments: |
|
Description
Kyle Bavender
2019-10-02 12:59:35 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. Could you file that stutter as a new bug please. We store and animate the spread value as an int, and it should be floating point. Created attachment 382864 [details]
Patch
Comment on attachment 382864 [details]
Patch
v.nice
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 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! This caused a regression, see https://bugs.webkit.org/show_bug.cgi?id=204348. This caused another regression, see bug 211530. |