Chrome上的模糊文字＆lt;按钮＆GT;与css变换相关的元素？

Question

我正在使用一个菜单，该菜单使用＆lt;的变换进行动画处理。 SVG＆GT;元素与它上面的按钮。奇怪的是，按钮上的文字在chrome中非常模糊，而在我到目前为止测试过的所有其他浏览器中它都非常清晰。

模糊文字与＆lt; SVG＆GT;元件。 （这是我的第一个猜测）如果我删除它，文本仍然模糊。它似乎与＆lt;按钮＆GT;元件。只显示文本而不在＆lt;按钮＆GT;在chrome中提供漂亮而清晰的文字。

这是当前分配给按钮元素的css：

.grid figure button {
top: 50%;
left: 50%;
border: medium none;
background: #316BA8 none repeat scroll 0% 0%;
color: #FFF;
opacity: 0;
transform: translateY(-50%) translateX(-50%) scale(0.25);

这是悬停时发生的变换:(当带有模糊文字的按钮出现时）

.grid div:hover figure button {
opacity: 0.9;
-webkit-transform: translateY(-50%) translateX(-50%) scale(1);
transform: translateY(-50%) translateX(-50%) scale(1);
}

我发现其他帖子将浏览器中的模糊文本（并非总是chrome）与css转换相关联，但我还没有能够找到可能应用于我的问题的任何答案。有什么想法吗？

谢谢！

Answer 1

这是缩放（可能甚至因为它与不透明度0.9相结合） - 尝试找到最佳点，如果可以或尝试检查它是否在硬件加速/没有硬件加速时更好。

但是你可以做的更多，因为它完全是由浏览器完成的。