Triggering memory leaks in Chrome 73 without JS
Background
I’ve recently been playing around with icon variable fonts and Glyphs. I’ve previously built a closed source icon set using Optical Sizing as an axis, but I wanted to toy around with a slightly less useful axis.
I have a custom axis called “Light” or in the cryptic code required by font-variation-settings “LGHT.” The simplest way an axis in a variable font can be defined is by setting up the two ends of your axis.
Note that at least in Glyphs, each of the two different shapes (masters) has to have the exact same number of points, even if the points won’t ultimately be visible to remain compatible. The light gray shows the opposite end of the axis.
With the CSS property above, you set LGHT to any integer value between 100–1000. You can actually set the axis to any integer value, but Firefox and Chrome at least clamp the displayed version to the min and max.
Using keyframes, the above icon can be animated with font-variation-settings to slide between the two values. I also have a div surrounding the icon that rotates as it slides between 100 and 1000 LGHT.
The Bug
In Chrome, font-variation axis animation seems to trigger a memory leak. I noticed after my MacBook Air was 32GB into swap. Unfortunately, it seems like the memory tooling within Chrome only works with JS based memory usage.
This bug is present in both Chrome 73 and 75 (Canary at the time of writing) on Mac OS Mojave (10.14.3).
Warning Chrome Users: here’s a link. https://angry-panini-577ab8.netlify.com/
Note for Firefox users not on Mac OS: Firefox currently only supports font-variation-settings on Mac OS.