使用Chrome和FireFox时，过渡和缩放会导致文本模糊。

Question

使用Chrome和FireFox时，过渡和缩放会导致文本模糊。

cssgoogle-chromefirefox

15

当我同时使用transition和transform时，动画在chrome和firefox上都不太平滑。当你将鼠标悬停在上面时，它会变得模糊。唯一正常的浏览器是IE。

Chome / FireFox（请注意文本，在动画开始时开始变得模糊。当它完成时，它会弹回到平滑的字母。）

期望的结果（在IE中可以工作）

我如何使这些动画在chrome和firefox上也变得平滑？

片段：

一旦过渡完成，元素就必须再次聚焦。在chrome和firefox上现在看起来是这样的。

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
  transition: all .33s ease-in-out;
}

button:hover {
  transform: scale(1.1);
  transition: all .33s ease-in-out;
}

<button>Hover me</button>

- Red

对我来说看起来很顺畅？具体问题是什么？ - Temani Afif

你使用Chrome还是Firefox？ - Red

你的意思是模糊部分吗？ - Tim Gerhard

请查看添加的 GIF。 - Red

任何遭受模糊文本之苦的人都应该阅读保罗·路易斯（Paul Lewis）撰写的这篇老文章。简单来说，它主要涉及次像素抗锯齿的一些怪异问题。https://www.html5rocks.com/en/tutorials/internals/antialiasing-101/ - dziku86

显示剩余3条评论

4个回答

4

我成功地在Firefox上消除了模糊效果，方法如下：

使用backface-visibility: hidden 可以解决问题，因为它将动画简化为对象的正面，而默认状态是正反两面都有。

backface-visibility: hidden;

或（或两者都是）

TranslateZ也起到作用，因为它是一种将硬件加速添加到动画中的技巧。

transform: translateZ(0);

- Атанас Атанасов

4

不要简单地复制粘贴答案。 - Ron van der Heijden

在使用此功能时，在Chrome上仍然有点模糊。 - Red

2

你可以尝试使用透视来解决问题，它将文本固定在其z轴上，技术上的原因我不太清楚。

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
  transition: all .33s ease-in-out;
  -webkit-perspective: 1;
  perspective: 1;
}

button:hover {
  transform: scale(1.1);
  transition: all .33s ease-in-out;
}

<button>Hover me</button>

- Celestz

我没有看到你的fiddle有任何改进。它仍然使字母模糊不清。 - Red

-1

目前我找到的最好的方法是先将元素缩小，然后再将其放大到原始尺寸，这样可以消除模糊效果。以下是一个例子：

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  padding: 20px;
  border-radius: 3px;
  transition: all .33s ease-in-out;
  transform:scale(0.7);
}

button:hover {
  transform : perspective(1px) scale(1);
  transition: all .33s ease-in-out;
}

<button>Hover me</button>

我知道这不是期望的结果，但我已经努力查找了很久，没有找到更好的东西。

- Tim Gerhard

1

动画开始时文本仍然模糊。 - Red

我知道这一点，但它比迄今提供的任何其他解决方案都要清晰得多。 - Tim Gerhard

哦，我的桌面上没有显示？它仍然是一样的，只有动画效果使按钮比问题小部件更大。 - Red

我认为这只是在欺骗你的眼睛。因为字母变小了，按钮变大了。但这不是我想要的。按钮必须保持与问题中的样式一致，我只想摆脱令人讨厌的模糊效果。它使动画看起来很丑陋 :| - Red

我认为你得忍受这个问题，直到Chrome修复它。不过你可以使用一张图片！ - Tim Gerhard

是的，也许 Chrome 开发人员会看到并修复它。谁知道呢 ;) - Red

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oleg · Accepted Answer

您可以使用字体相对单位（em）并在悬停时增加元素字体大小来实现非常相似的效果。

button {
  font-size: .875em; /* =14/16 or whatever your base font size is */
  padding: .625em; /* =10/16 */
  border-radius: .1875em; /* =3/16 */
}

button:hover {
  font-size: 1em; /* close enough to 1.1x */
}

请注意，这通常被认为比使用变换要不太优秀，至少尝试将元素定位到周围重新流动较少的位置。

Windows 10上的Chrome 64：

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: .875em; /* =14/16 or whatever your base font size is */
  color: #fff;
  padding: .625em; /* =10/16 */
  border-radius: .1875em; /* =3/16 */
  transition: all .33s ease-in-out;
  transform: translateX(-50%) translateY(-50%);
}

button:hover {
  font-size: 1em; /* close enough to 1.1x */
  transition: all .33s ease-in-out;
}

<span style="position: relative; left: 2.5em; top: 1em;">
  <button>Hover me</button>
</span>