在其他浏览器上平滑的字母间距过渡答案

【问题标题】：Smooth letter-spacing transition on other browsers在其他浏览器上平滑的字母间距过渡
【发布时间】：2014-08-15 22:03:03
【问题描述】：

我正在使用以下动画来制作悬停过渡：

a {
 letter-spacing: 1px;
 transition: all .5s ease-in;
}
a {
 letter-spacing: 2px;
}

Here is a jsBin.

起初我没想到这会很漂亮，但当我看到它在 Chrome 中的动画效果如此流畅时，我感到很惊喜。尽管它只改变了 1px 的间距，但不知何故，Chrome 给人一种平滑过渡的错觉。

在 Safari 中，虽然它只是从 1px 跳到 2px，没有很好的平滑效果。

有没有办法在 Safari 中获得同样的效果？

（或者，在非 Chrome 浏览器中是否有纯 CSS 方法来禁用此功能？）

【问题讨论】：

对我来说在 Firefox 中看起来不错... Safari 是虽然很跳跃
@misterManSam 我的眼睛一定出卖了我，只是仔细检查了一下，发布的 jsBin 示例在 Firefox 上运行良好。可以确认它在 Safari 上很丑。已编辑的问题。

标签： css transition letter-spacing

【解决方案1】：

我误读了list of CSS Animated properties 中letter-spacing 的条目。实际上，任何类型的长度单位都可以用于letter-spacing 动画。看起来 Safari 不能平滑地为 1 个像素的差异设置动画 - 一个错误。

小字母间距动画跨浏览器的解决方案是使用em 单位和.1s 的较小延迟以获得平滑过渡。 Safari 没有像 small letter-spacing 动画那样流畅的动画，但还过得去。

Updated example jsBin with an em unit（已在 Safari、Firefox、Chrome 中测试并运行）

CSS

a {
 letter-spacing: 1px;
 transition: all .1s ease-in;
}
a:hover {
 letter-spacing: 0.2em;
}

可用的浏览器前缀（如果需要）：

-webkit-transition: all .1s ease-in;
-moz-transition: all .1s ease-in;
-ms-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
transition: all .1s ease-in;

【讨论】：

谢谢！很好的解释，现在可以在 Safari 上运行，但由于某种原因，在 OS X 上的 Firefox 31 上，我的字母间距转换无法正常工作，即使使用所有供应商前缀并使用 ems。如果问得不多，如果你有时间，你能看看你是否能查明问题吗？ rlcoaching.com/rl 在 Safari 和 Chrome 上运行良好，但现在这些修复。
我恐怕无法快速查看问题。尝试删除所有其他转换，并完全使用transition: all .5s ease-in;。如果可行，则一一添加您的其他过渡，看看是什么破坏了它。
感谢您的帮助并尝试一下！

【解决方案2】：

要禁用它，请使用如下代码：

@media screen and (-webkit-min-device-pixel-ratio:0) {
a {
letter-spacing: 1px;
transition: all .5s ease-in;
}
a {
letter-spacing: 2px;
}
}

这将禁用您在任何非 webkit 浏览器中的代码（因此，仅适用于 Chrome 和 Safari）。除此之外，您的代码运行良好，Webkit 具有更好的平滑引擎，仅此而已，但 Firefox 和 IE 可以毫无问题地处理它，所以真的不知道您在差异方面看到了什么

【讨论】：