Bug 198633 - filter functions should clamp during animation
Summary: filter functions should clamp during animation
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 12
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: FromImplementor, InRadar
Depends on:
Blocks:
 
Reported: 2019-06-06 17:07 PDT by Eric Willigers
Modified: 2019-06-07 11:07 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Eric Willigers 2019-06-06 17:07:28 PDT
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/
Comment 1 Radar WebKit Bug Importer 2019-06-06 22:17:21 PDT
<rdar://problem/51511977>