Bug 198633
| Summary: | filter functions should clamp during animation | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Eric Willigers <ericwilligers> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED WORKSFORME | ||
| Severity: | Normal | CC: | dino, graouts, gsnedders, simon.fraser, webkit-bug-importer |
| Priority: | P2 | Keywords: | FromImplementor, InRadar |
| Version: | Safari 12 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
Eric Willigers
Animate CSS filter functions grayscale, invert, opacity or sepia.
Use a bezier timing function that gives progress > 1.
https://jsfiddle.net/ericwilligers/bes3uyxz/
Or proposed WPT css/filter-effects/animation/filter-interpolation-004.html in
https://github.com/web-platform-tests/wpt/pull/17030/
Actual results:
grayscale(1.5)
invert(1.5)
opacity(1.5)
sepia(1.5)
Expected results:
grayscale(1)
invert(1)
opacity(1)
sepia(1)
Equivalent Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1557563
Note also that negative animation results are not clamped. None of the following should occur:
blur(-10px)
brightness(-1)
contrast(-1)
grayscale(-1)
invert(-1)
opacity(-1)
saturate(-1)
https://jsfiddle.net/ericwilligers/t3pmqbd1/
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/51511977>
Sam Sneddon [:gsnedders]
https://wpt.fyi/results/css/filter-effects/animation/filter-interpolation-004.html?label=master&label=experimental&aligned shows the above mentioned WPT test passing, so closing this out.