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

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

Answer 1

尝试使用scale3d而不是缩放..只是猜测。通常它是反过来的，它在浏览器中是平滑的而不是在iPad上。

CSS3转换比例 - 模糊桌面＆amp;完美手机

1 个答案: