html - 变换缩放属性 CSS3 在 Google Chrome 中模糊

Question

你好我想在用户悬停时缩放一个分区，但它在 chrome 中变得模糊

这是我的代码:

.cost_block:hover {
box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5);
transform: scale(1.01) translateY(-5px);
z-index: 1;
border-bottom: 0 none;}

我尝试了很多次，但仍然没有得到正确的结果。

Answer 1

不幸的是，您无法完全摆脱 Chrome 中的模糊效果。但是您可以通过应用以下命令强制由 GPU 绘制元素:

.cost_block {
  -webkit-transform: translateZ(0);
}

查看 this article了解更多信息。

.cost_block {
    -webkit-transform: scale(1) translateY(0) translateZ(0);
}

.cost_block:hover {
    box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5);
    -webkit-transform: scale(1.01) translateY(-5px) translateZ(0);
    z-index: 1;
    border-bottom: 0 none;
}