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

EDUCATIONMay 19, 2021
Quantic’s MBA: Information on the New MBA Program

You may have heard about Quantic’s Free MBA. It’s an innovative degree program that flips the tuition model so that employers pay to recruit from Quantic’s student and alumni network, thus shifting the burden of tuition from student to employer.  You may have also heard that Quantic’s MBA is no longer free — and you’d … Continue reading “Quantic’s MBA: Information on the New MBA Program”

EDUCATIONFebruary 10, 2021
The Benefits of an MBA for Startups and Entrepreneurs

Common folklore surrounding what it takes to start a business is awash with one familiar motif: the dropout-turned-billionaire entrepreneur.  Indeed, when enterprising individuals come of age and start contemplating business ideas, their dreams often adopt this narrative. For a long time now, a contrast has been cast between two groups of people. In one corner, … Continue reading “The Benefits of an MBA for Startups and Entrepreneurs”

CAREER PLANNINGNovember 23, 2020
The Winning Tech Resume

Tech jobs across the world are rapidly increasing and can be found in most industries. The rise of such jobs is due to organizations increasingly relying on computer systems and technologies.  Examples are the adoption of cloud computing and cybersecurity. As a result, employment in IT occupations is predicted to increase by up to 12% … Continue reading “The Winning Tech Resume”

Ready to jump start your career?

Start learning with Quantic.