will-change: transform нужно использовать только тогда, когда вы точно понимаете, что делаете.translate3d(0, 0, 1px) неминуемо отправит рендер блока на видеокарту, что гарантированно создаст мыло для текста. Тут как раз все дело в том, что нужно отключать аппаратное ускорение после завершения анимации. Нет аппаратного ускорения - рендеринг отправляется на процессор, и шрифты рендерятся нормально. Есть аппаратное ускорение - шрифты рендерятся "как получится": могут быть неотличимы от рендеринга без ускорения(четкими), а могут упасть в мыло.-webkit-font-smoothing: subpixel-antialiased; здесь ничем не поможет(если только ну совсем чуть-чуть). Есть блок, его размер, например, 300х1000. Этот блок для ретина экранов рендерится в размере 2x, то есть это уже 600x2000. Так как браузер понятия не имеет, какой внутри блока контент, то блок рендерится так, как будто там все постоянно меняется каждую секунду, и чтобы держать 60 FPS, все рендерится в уменьшенном виде. Поэтому получается мыло, так как мы 300х1000 пытаемся отскейлить в 2 раза. На слабых компьютерах с sd-дисплеями браузер сначала делает даунскейл, а потом увеличивает получившийся рендер до размеров блока - так быстрее.
Не представляю кому это может быть нужно да еще и в таком виде. Выложил на github только потому, что так удобнее деплоить WP-сайты с помощью Trellis.