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

Description Joseph Pearson 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.

Comment 1 Radar WebKit Bug Importer 2020-09-02 18:17:04 PDT

<rdar://problem/68245777>

Comment 2 Antoine Quint 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 ***