Safari/Webkit动画字体大小不定 [英] Safari / Webkit Animating Font Size is Jumpy

问题描述

在Firefox中设置动画字体大小具有很好的平滑效果，而在Safari(和Chrome中，但效果稍差)中，动画效果令人赞叹.所谓的跳动，是指文本的字距和渲染不会平滑变化，好像Safari无法跟上字体变化的速度一样快.

Animating font sizes in Firefox has a nice smooth effect, while in Safari (and Chrome but less so) it is jumpy. By jumpy I mean the kerning and rendering on the text does not change smoothly, as if Safari is not able to keep up with the font sizes changing so fast.

字体大小以10像素开始:

font size starts at 10px:

$('#myel).animate({fontSize:'20px'}, 300); 

这是正常行为吗，对此有一些偷偷摸摸的解决方法吗?

Is this normal behavior and is there some sneaky fix for this?

推荐答案

我认为这要舍入.字体大小的呈现方式以及这些字体(以其新大小)如何放置在文档流中.由于1px是现实世界中最小的度量单位，因此有可能放弃".

I believe this is down to rounding. Both in how font sizes are rendered and in how those fonts (at their new sizes) are placed within the document flow. Since 1px is the smallest real-world unit of measurement, there is potential for something to 'give'.

我最近看到了针对类似问题的修复程序，该修复程序涉及以动画字体大小绝对定位元素.我不知道这是否适合您.

I recently saw a fix for a similar issue, which involved absolutely positioning the element with the animated font size. I don't know if that's an option for you.

这篇关于Safari/Webkit动画字体大小不定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！