移动设备上的字体大小转换不流畅

Question

我正在尝试对字体大小属性应用过渡。它在桌面浏览器上工作流畅，但在移动浏览器的情况下，例如安卓浏览器或 iOS 铬或 safari，字体大小的过渡并不流畅。
下面是 CSS

.dummy-text{
        font-size: 24px;
        transition: font-size 0.5s linear;
    }

下面是小提琴
https://jsfiddle.net/3y7zbv0c/1/
有人可以告诉我如何在移动设备浏览器上使其流畅吗？

Answer 1

如果您使用带有@keyframes的动画，则性能将优于transition。但是，您的问题是JavaScript会增加文本的大小。这是没有javascript的解决方案：

https://jsfiddle.net/3y7zbv0c/2/

@keyframes example {
  from {font-size: 24px;}
  to {font-size: 34px;}
}
.dummy-text{
  font-size: 24px;
  animation: example 4s infinite;
}

<div class="dummy-text">
  This is text
</div>