22

我正在尝试为 letter-spacing 属性提供一个不错的 CSS 过渡。

它在 Firefox 和 Internet Explorer 10 中看起来很棒（在 IE 中终于可以正常工作了。天哪，对吧？）

但它在 Chrome 或 Opera 中不起作用。在 Chrome 中它是一系列抖动，所以它从 2px 到 1px 到 0。没有像 IE/Firefox 那样的平滑像素渲染。

有什么办法可以让 Chrome 渲染流畅吗？

这是一个简单的例子：

p {
    letter-spacing:2px; 
    -webkit-transition: letter-spacing, 1s;
    -moz-transition: letter-spacing, 1s;
    -o-transition: letter-spacing, 1s;
    transition: letter-spacing, 1s;
}
p:hover {letter-spacing:0;}

http://jsfiddle.net/aDhRz/

4

7 回答 7

2

此问题现已在 Blink（为 Chrome 布局引擎提供支持）中修复，但尚未在稳定的 Chrome 中推出。但是您现在可以看到它在 Chrome Canary 中运行良好。

在它可供所有人使用之前，我认为没有使用canvas. 我们很幸运 Chrome 自动更新 :)

闪烁修复：http ://src.chromium.org/viewvc/blink?view=revision&revision=153727

似乎 Google 正在认真对待 Blink 开发，因为这个 bug 从 2008 年就存在于 WebKit 中，并且仍然没有修复。

WebKit 错误报告：https ://bugs.webkit.org/show_bug.cgi?id=20606

于 2013-09-10T13:10:31.650 回答
1

如果您在 Chrome 中遇到性能问题，您可以尝试将元素强制到其GPU在其自己的图层上呈现的位置。这可以使用translate3d

例子

p{
   -webkit-transform: translate3d(0,0,0);
}

使用 chrome 开发工具时间线来缩小问题范围也是值得的。

使用时间轴进行性能分析

于 2013-09-06T14:15:28.453 回答
0

在您的示例中，随着过渡在每一步中减少，它不可能变得平滑1px，它就像任何其他使用像素的 css 属性一样工作，如果您增加它，px您会看到它确实像这个示例演示一样平滑地渲染

如果您将如此微小的像素变化添加到另一个持续时间较长的像素属性，您将看到与此演示相同的Step 可见性效果

因此，唯一可行的方法是您可以告诉 chrome 将步骤更改为类似0.1px但不幸的是您不能这样做。

所以说了这么多，如果你添加那种（更改+过渡）组合，你会发现它在每个属性上都是一样的，我会说这不是一个错误。

于 2013-09-09T09:36:50.543 回答
0

用这个

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

在你的标签之前。这必须解决你的问题。

Jukka K. Korpela在下面的一个主题中解释了使用它的原因。

根据 SGML 标准，您的文档类型声明通过命名来指定文档类型定义，如 W3C 注册的那样。但是，根据 HTML 4.01 规范，文档必须具有三种可选文档类型声明之一，并且它们都包含 URL。

这只是理论，因为浏览器实际上并不读取 DTD。在 doctype 嗅探中，它们将文档类型声明视为魔术字符串。但是，在大多数浏览器中，浏览器模式的选择受 HTML 4.01 过渡的魔术字符串中是否存在 URL 的影响。当它不存在时，它们以怪癖模式运行。当它存在时，大多数浏览器以“标准模式”或“几乎标准模式”运行。

怪癖模式意味着大量不同的怪癖，因此从它切换到“标准模式”的效果可能意味着几乎任何事情（从没有效果到完全灾难）。这种切换通常需要仔细检查（如果不重写）整个文档。

于 2013-09-10T12:18:15.180 回答
0

尝试使用 em 而不是 px，它并不完美，但它是一种改进。更快的速度似乎也不那么跳跃。

p {
letter-spacing:0.5em; 
-webkit-transition: letter-spacing, 0.5s;
-moz-transition: letter-spacing, 0.5s;
-o-transition: letter-spacing, 0.5s;
transition: letter-spacing, 0.5s;
}
p:hover {
letter-spacing:0em;
}

http://jsfiddle.net/Q7Cvd/

于 2013-09-09T11:41:56.987 回答
-2

为什么不使用一点 jQuery 来解决这个问题。这是小提琴http://jsfiddle.net/aDhRz/

(function(){
  $('p').hover(function(){
     $(this).toggleClass('zero');
  });
})();

和CSS

.zero{
  letter-spacing:0;
}
于 2013-09-09T05:45:13.947 回答
-2

尝试这个

p {
    letter-spacing:2px; 
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}
p:hover {letter-spacing:0;}
于 2013-09-06T11:17:38.787 回答