SHARE

EDUCATION

text-transform: An Unlikely Source of Jank

Here at Quantic, 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!


SHARE

Trending now

MSSE image horizontal
ARTIFICIAL INTELLIGENCEDecember 6, 2024
Advance Your Software Engineering Career in the Age of AI

The global AI Development Tool Software market is rapidly expanding, with revenue reaching $8.44 billion in 2024 and growing at an annual rate (CAGR) of 8.61%, hitting $12.75 billion by 2029. As a result, this surge reflects the increasing adoption of AI technologies across industries, dramatically reshaping how software engineers design, deploy, and manage applications. …

EDUCATIONSeptember 23, 2024
MiyaMiya, Impact Arm of Pedago, Quantic’s Sister Company, is Named Clinton Global Initiative Commitment Maker, Expands STEM Education Access in Cambodia

September 23, 2024 – MiyaMiya, the philanthropic arm of Pedago, the sister company of Quantic School of Business and Technology, has been honored as a Commitment Maker by the Clinton Global Initiative (CGI). This recognition highlights MiyaMiya’s dedication to advancing education, specifically STEM learning, in Cambodia. As part of this commitment, MiyaMiya will spearhead a …

An up-view of city skyscrapers with a block of text about Quantic reviews of the online MBA program and student experiences
EDUCATIONJune 12, 2024
The Modern MBA: Student Experiences

With Alexandria Dixon, Program Manager at SAP; Torrey Payne, Engineering Manager at Thirty Madison; and Katie Tomola, Senior Learning & Development Operations Specialist at Wells Fargo. With the rate of change being seen across all industries, today’s business leaders require an education partner that will equip them for the future of work. Through an innovative …

Ready to jump start your career?

Start learning with Quantic.