Safari / Webkit 动画字体大小不稳定

发布于 2024-12-11 19:10:55 字数 254 浏览 0 评论 0原文

在 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

故事↓在人 2024-12-18 19:10:55

我相信这取决于四舍五入。字体大小的呈现方式以及这些字体(以其新大小)如何放置在文档流中。由于 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文