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;
}

Answer 2

它的问题，我们现在无法解决这个问题。唯一的方法是在属性值中使用整数，它可能会变得更好

Answer 3

使用跨浏览器前缀可以获得更多好运：

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

转换比例属性CSS3在Google Chrome中模糊

3 个答案: