Beyond the Quad

The Quantic Blog

SHARE

EDUCATION

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!


SHARE

Trending now

MBAAugust 11, 2022
Women MBA Grads On The Rise: Reasons To Join Them Post-Covid

The pandemic changed so much of how we live life—from how we shop for our groceries and everyday supplies, to how we attend worship services and school classes.  Every aspect of our lives, it seems, looks a bit different now than it did in the time before the spring of 2020. One thing that significantly …

MBAAugust 5, 2022
The Rising Number of Women in Business School Explained

A harsh reality concerning the business world is that women face many disadvantages in their effort to bridge the gender gap. Despite making up slightly more than half the population, women rarely appear on the list of top business leaders. This disparity likely traces its roots to the smaller proportion of women in business schools …

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. …

Ready to jump start your career?

Start learning with Quantic.