我遇到了一个关于 CSS 转换的非常令人沮丧的问题scale。我有一个文本块，我想在悬停时将其缩放 105%，但它导致文本模糊，但仅限于 Windows 版本的 Chrome。我发现这个问题 https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome并尝试了那里提供的各种解决方案，但我仍然无法让它按预期工作。
body, html {
font-family:'Open Sans', sans-serif;
}
.zoom {
transition:transform .5s;
width:300px;
margin:50px auto;
}
.zoom:hover {
transform: scale(1.05) translateZ(0);
will-change:transform;
}
.zoom h4 {
font-size:2rem;
line-height:2.5rem;
-webkit-font-smoothing:antialiased;
backface-visibility: hidden;
-webkit-filter: blur(0);
filter: blur(0);
margin:0;
text-transform:uppercase;
}
.zoom p {
-webkit-font-smoothing:antialiased;
backface-visibility:hidden;
-webkit-filter:blur(0);
filter:blur(0);
margin:0;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="zoom">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, conse ctetur adipiscing elit…</p>
</div>
正如我之前提到的，这似乎只是 Windows 版本的 Chrome 上的问题。在 OSX、FireFox 甚至 IE 的 Chrome 上，不会出现此问题。我愿意使用不同的解决方案transform，前提是动画有一个过渡，就像我的示例中那样。然而，我希望它是一个仅 CSS 的解决方案。
有任何想法吗？
我现在无法自己测试，因为我手边没有 Windows 计算机，但也许您可以采取以下任一解决方案：
- Adding
backface-visibility: hidden; to .zoom
- 改变你的
transform on .zoom:hover财产给transform: scale(1.05) translateZ(0);
This should触发 GPU 材质加速，然后might解决您在 Chrome 上的问题。但没有任何承诺。祝你好运！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
