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 上却不流畅。