Safari / Webkit 动画字体大小不稳定
在 Firefox 中对字体大小进行动画处理具有良好的平滑效果,而在 Safari(以及 Chrome,但不那么明显)中则显得有些跳跃。我所说的跳跃是指文本上的字距调整和渲染变化不平滑,就好像 Safari 无法跟上如此快速变化的字体大小一样。
字体大小从 10px 开始:
$('#myel).animate({fontSize:'20px'}, 300);
这是正常行为吗?是否有一些偷偷摸摸的修复方法?
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.
font size starts at 10px:
$('#myel).animate({fontSize:'20px'}, 300);
Is this normal behavior and is there some sneaky fix for this?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我相信这取决于四舍五入。字体大小的呈现方式以及这些字体(以其新大小)如何放置在文档流中。由于 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.