Bug 244994 - stevejobsarchive.com: Text animations not as smooth on Safari as in Chrome or Firefox
Summary: stevejobsarchive.com: Text animations not as smooth on Safari as in Chrome or...
Status: RESOLVED DUPLICATE of bug 46987
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2022-09-09 11:15 PDT by Jon Lee
Modified: 2023-03-20 06:20 PDT (History)
9 users (show)

See Also:

Attachments
Reduction (534 bytes, text/html)
2022-09-13 07:15 PDT, Antoine Quint 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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 ***