Text aliasing when scaling DOWN webfont with CSS transforms

Question

Following best practice, I'm using requestAnimationFrame and CSS transforms to smoothly scale elements in an HTML5 / ES6 (compiled to JavaScript) app.

When I apply this to text, I originally set the font-size property much bigger, and scale down from there using a CSS transform on scale.

The problem is that this is causing unusable levels of aliasing when the text is scaled to less than 0.5. I'm working in the latest stable version of Chrome but it's the same on Safari.

I have set the following properties on the parent element:

-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);

but that is having no effect. I also set the -webkit-backface-visibility property on the element itself, and tried the outline: 1px solid transparent; trick - no joy.

Has anyone experienced this? Is there a way to get the antialiasing to kick in when scaling text using CSS transforms?