CSS3 变换比例 - 模糊的桌面和完美的移动

Question

我有一个带有背景图像的 div。悬停时，我应用 2 个滤镜（对比度和亮度）并进行小幅缩放。

在缩放转换期间，Chrome 和 Safari 上的图像变得非常模糊（停止移动后，它变得更加清晰但仍然模糊），而在 Mozilla 中，图像变得模糊。在我的 iPad（Chrome 和 Safari）上，这个动画看起来很流畅而且很棒（通常在移动设备上会有模糊和不流畅的动画，但事实并非如此......）。

尝试应用一些 translate3d(0,0,0), translateZ(0px), perspective: 1000 来获得一些硬件 CSS3 加速，但结果仍然相同。

这里有一些代码：

.animate {
  position: absolute;
  left: 50px;
  z-index: 2;

  width: 320px;
  height: 180px;

  background-image:url('./images/example.png');
  background-size: cover;
  background-position: center center;

  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);

  transition: 300ms ease-out;
}

.animate:hover {
  transform: scale(1.03);
  filter: contrast(120%) brightness(100%);
}

即使我将 div 的背景图像替换为 <img> 标记，也会发生这种情况。

Answer 1

尝试使用 scale3d 而不是 scale..只是猜测。通常情况正好相反，在浏览器中流畅，而不是在 iPad 上。