244994 2022-09-09 11:15:36 -0700 stevejobsarchive.com: Text animations not as smooth on Safari as in Chrome or Firefox 2023-03-20 06:20:19 -0700 1 1 1 Unclassified WebKit Animations WebKit Nightly Build Unspecified Unspecified RESOLVED DUPLICATE 46987 BrowserCompat, InRadar P2 Normal --- 1 jonlee554 webkit-unassigned dino graouts graouts karlcow koivisto mmaxfield simon.fraser webkit-bug-importer zalan oldest_to_newest 1897317 0 jonlee554 2022-09-09 11:15:36 -0700 Go to stevejobsarchive.com, scroll down, and click on any quote. The text animations are chunky in Safari/STP compared to Chrome or Firefox. 1897467 1 webkit-bug-importer 2022-09-09 18:47:14 -0700 <rdar://problem/99768492> 1898206 2 graouts 2022-09-13 06:17:17 -0700 It appears a font-size CSS transition is applied here, not sure if that's the slow bit since there are also things moving. 1898209 3 graouts 2022-09-13 06:23:04 -0700 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"> 1898220 4 graouts 2022-09-13 06:49:15 -0700 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>. 1898230 5 462318 graouts 2022-09-13 07:15:43 -0700 Created attachment 462318 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. 1898270 6 graouts 2022-09-13 09:58:42 -0700 Could be due to https://bugs.webkit.org/show_bug.cgi?id=46987. 1898320 7 graouts 2022-09-13 13:19:52 -0700 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. 1942517 8 graouts 2023-03-20 06:20:06 -0700 *** This bug has been marked as a duplicate of bug 46987 *** 462318 2022-09-13 07:15:43 -0700 2022-09-13 07:15:43 -0700 Reduction bug-244994.html text/html 534 graouts PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgICA8bWV0YSBjaGFyc2V0 PSJ1dGYtOCI+CiAgICA8dGl0bGU+UmVkdWN0aW9uIGZvciBidWcgMjQ0OTk0PC90aXRsZT4KICAg IDxzdHlsZT4KCi5xdW90ZSB7CiAgICBmb250LXNpemU6IDQ4cHg7CiAgICB0cmFuc2l0aW9uOmZv bnQtc2l6ZSAxMzMzbXM7Cn0KCi5sYXJnZSB7CiAgICBmb250LXNpemU6IDU2cHg7Cn0KCiAgICA8 L3N0eWxlPgo8L2hlYWQ+Cgo8ZGl2IGNsYXNzPSJxdW90ZSI+bWFrZSBzb21ldGhpbmcgd29uZGVy ZnVsIGFuZCBwdXQgaXQgb3V0IHRoZXJlPC9kaXY+Cgo8c2NyaXB0PgoKY29uc3QgcXVvdGUgPSBk b2N1bWVudC5xdWVyeVNlbGVjdG9yKCIucXVvdGUiKTsKY29uc3QgdG9nZ2xlID0gKCkgPT4gc2V0 VGltZW91dCgoKSA9PiBxdW90ZS5jbGFzc0xpc3QudG9nZ2xlKCJsYXJnZSIpKTsKCnF1b3RlLmFk ZEV2ZW50TGlzdGVuZXIoInRyYW5zaXRpb25lbmQiLCB0b2dnbGUpOwp0b2dnbGUoKTsKCjwvc2Ny aXB0PgoKPC9ib2R5Pgo8L2h0bWw+