Bug 244994

Summary:

stevejobsarchive.com: Text animations not as smooth on Safari as in Chrome or Firefox

Product:

WebKit

Reporter:

Jon Lee <jonlee554>

Component:

Animations

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

dino, graouts, graouts, karlcow, koivisto, mmaxfield, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

WebKit Nightly Build

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
Reduction	none

Description Jon Lee 2022-09-09 11:15:36 PDT

Go to stevejobsarchive.com, scroll down, and click on any quote. The text animations are chunky in Safari/STP compared to Chrome or Firefox.

Comment 1 Radar WebKit Bug Importer 2022-09-09 18:47:14 PDT

<rdar://problem/99768492>

Comment 2 Antoine Quint 2022-09-13 06:17:17 PDT

It appears a font-size CSS transition is applied here, not sure if that's the slow bit since there are also things moving.

Comment 3 Antoine Quint 2022-09-13 06:23:04 PDT

There are three animations happening at once:

1. CSSTransition for transform going from matrix(1, 0, 0, 1, 0, 0) to matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0) running for 200ms on <button class="BaseButton_container__ZKYS_ IconButton_button__vPKSn IconButton_buttonLarge__gS9Aj IconButton_colorThemeLightWhiteHover__F8Vz3 TimelineListItem_button__FWbRc TimelineListItem_buttonRotated__V76He">

2. CSSTransition for padding-left going from 84.375px to 0px running for 1333ms on <div class="Thumbnail_mediaContainer__7qgG_ Thumbnail_mediaContainerExpanded__4bnIH">

3. CSSTransition for font-size going from 44.099998px to 75.599998px running for 1333ms on <div class="Quote_quoteSmall__xPcwP Quote_quoteLarge__zsfwo">

Comment 4 Antoine Quint 2022-09-13 06:49:15 PDT

It is all about the font-size transition, our redraw performance is terrible compared to other browsers. Even animating a single word is terribly slow, never mind this example with each word of the quote broken into an individual <span>.

Comment 5 Antoine Quint 2022-09-13 07:15:43 PDT

Created attachment 462318 [details]
Reduction

So forget about individual spans, I've narrowed it down to a reduction that is just a <div> and some words inside without any fancy formatting.

Comment 6 Antoine Quint 2022-09-13 09:58:42 PDT

Could be due to https://bugs.webkit.org/show_bug.cgi?id=46987.

Comment 7 Antoine Quint 2022-09-13 13:19:52 PDT

Indeed, trying out the branch for the in-progress PR fixing that bug makes stevejobsarchive.com noticeably smoother. I'll re-evaluate this bug once bug 46987 is closed to see if more work is needed.

Comment 8 Antoine Quint 2023-03-20 06:20:06 PDT


*** This bug has been marked as a duplicate of bug 46987 ***