RESOLVED DUPLICATE of bug 46987244994
stevejobsarchive.com: Text animations not as smooth on Safari as in Chrome or Firefox 
https://bugs.webkit.org/show_bug.cgi?id=244994
Summary stevejobsarchive.com: Text animations not as smooth on Safari as in Chrome or...
Jon Lee
Reported 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.
Attachments
Reduction (534 bytes, text/html)
2022-09-13 07:15 PDT, Antoine Quint 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2022-09-09 18:47:14 PDT
<rdar://problem/99768492>
Antoine Quint
Comment 2 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.
Antoine Quint
Comment 3 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">
Antoine Quint
Comment 4 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>.
Antoine Quint
Comment 5 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.
Antoine Quint
Comment 6 2022-09-13 09:58:42 PDT
Could be due to https://bugs.webkit.org/show_bug.cgi?id=46987.
Antoine Quint
Comment 7 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.
Antoine Quint
Comment 8 2023-03-20 06:20:06 PDT
*** This bug has been marked as a duplicate of bug 46987 ***
Note You need to log in before you can comment on or make changes to this bug.