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 而不是比例..只是一个猜测。通常情况恰恰相反，它在浏览器中是流畅的，而不是 iPad.

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

CSS3 Transform Scale - Blurry Desktop & Perfect Mobile

css

scale

hover

css-transitions