text-transform: An Unlikely Source of Jank

Here at Pedago, we take a hard look at the performance of our applications so that our users don’t have to experience any troublesome hiccups (or “jank”) that might otherwise sour a sweet learning experience.

While “performance” can cover a wide array of metrics, we tend to be extremely critical of browser overhead (script execution, rendering layout, and painting). While others have covered optimization of these metrics in great detail, we came across an unlikely jank-vector that we thought was worth mentioning.

When analyzing CSS performance in relation to browser lifecycle, there are a few notorious styles (eg: border-radius, box-shadow, transform, backface-visibility, etc) that tend to slow down frame rate. Some of these are obvious as they dramatically influence the rendering process or add additional calculations for stylistic ooomph. One might be extremely likely to overlook the rather mundane text-transform while focusing on that list, though.

We had several elements each containing a finite number of additional elements that all were performing CSS-dictated uppercasing on their text content. Now, this might not be a significantly intensive operation in itself, but combined with some excessively spastic scrolling, it degraded the user experience somewhat significantly. After we updated the content to be rendered in uppercase without the need for CSS text transformation, the improvement was obvious.

Here’s how things looked on a common mobile platform, prior to the change (FPS is the key metric, with 60FPS as an ideal target):

with CSS text transform

As you can see, we were barely hitting the 30FPS threshold and often even missing that window. Here’s what we observed after we removed the relevant text-transform styles:

no CSS text transform

As you can see, we’re now closer to consistently hitting that golden 60FPS benchmark! Granted, we were probably abusing a CSS style that was intended for narrower application, and the DOM of this particular page meant that there were a lot of them, so your mileage may certainly vary. However, this might help serve others in the war against jank!


Trending now

OUR FACULTYMay 16, 2022
Quantic Live: A Conversation with Dr. Nan Zhang, Quantic Marketing SME

Do you want to learn more about the Quantic student experience? Enjoy our conversation with Quantic Marketing SME, Dr. Nan Zhang!  Dr. Zhang has worked in multiple roles as researcher, consultant, and professor. Her research focus is the impact of consumer’s identity on social media communication. She received her PhD in marketing from Southern Illinois University. …

EDUCATIONMarch 1, 2022
Global Mobile-based Learning Platform Raises $15 Million to Re-Shape Education With Programs Engineered For the Modern Workforce

Washington, DC — March 1, 2022 — Pedago, the mobile-first online education company focused on career-embedded education, announced today that it will receive $15M in funding from Elephant, which is backing disruptive software, internet and mobile companies. Pedago’s initial partner institution, Quantic School of Business and Technology, received over 75,000 applications and nearly doubled bookings …

EDUCATIONJanuary 24, 2022
10 Companies That Will Pay For Your MBA Degree In 2021

On average, your two-year MBA program can cost well over $50,000. MBA Program Cost Wharton School $83,230 Harvard Business School $73,440 Yale $76,770 MIT Sloan $78,954 This is on tuition fees alone. When you factor in other expenses like health insurance, rent, transportation, and indirect costs, you’re looking at over $100,000 for most top MBA …

Ready to jump start your career?

Start learning with Quantic.