Go to stevejobsarchive.com, scroll down, and click on any quote. The text animations are chunky in Safari/STP compared to Chrome or Firefox.
<rdar://problem/99768492>
It appears a font-size CSS transition is applied here, not sure if that's the slow bit since there are also things moving.
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">
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>.
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.
Could be due to https://bugs.webkit.org/show_bug.cgi?id=46987.
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.
*** This bug has been marked as a duplicate of bug 46987 ***