Bug 216107

Summary:

Negative values in cubic-bezier transform transitions do not work

Product:

WebKit

Reporter:

Joseph Pearson <j>

Component:

Animations

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

dino, graouts, graouts, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

All

OS:

All

Attachments:

Description	Flags
Save as HTML and open in latest Webkit! "Animate: transform" is broken behavior; "Animate: top" is expected behavior.	none

Joseph Pearson

Reported 2020-09-02 16:10:35 PDT

Created attachment 407829 [details] Save as HTML and open in latest Webkit! "Animate: transform" is broken behavior; "Animate: top" is expected behavior. When a CSS cubic-bezier easing function contains a negative value, and the transition property is `transform`, the property doesn't animate while in the negative range. It starts animating when the easing function enters the positive range. **See attachment** for bug reduction with `transform` and expected behavior with `top`. The expected behavior with `transform` is observed in iOS 13, Chrome, and Firefox. This bug was introduced between Safari 13 and 14. We have been using this animation feature at https://libbyapp.com for several years, and noticed it broke in Saf 14 betas.

Attachments
Save as HTML and open in latest Webkit! "Animate: transform" is broken behavior; "Animate: top" is expected behavior. (1.73 KB, text/html) 2020-09-02 16:10 PDT, Joseph Pearson	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2020-09-02 18:17:04 PDT

<rdar://problem/68245777>

Antoine Quint

Comment 2 2020-09-03 02:18:36 PDT

Thanks for filing this! This is a duplicate of bug 215826 which was fixed in r266280 last week. *** This bug has been marked as a duplicate of bug 215826 ***

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