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

我有一个背景图像的div。在悬停时，我应用了2个滤镜（对比度和亮度）并进行小比例缩放。CSS3变换比例 - 模糊桌面和完美移动

在缩放转换过程中，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>标签。

来源

2016-09-20 bmfteixeira

你能提供一个链接吗？ –

对不起，先生，这仍然在公司举办，我无法提供。 – bmfteixeira

尝试使用scale3d而不是scale.just猜测。通常情况下，这是相反的方式，在浏览器中平滑，而不是在iPad上。

来源

2016-09-20 23:14:45 sean

我不是100％确定为什么，但它的工作！如果您保留CSS加速命令，现在在桌面上更流畅，并且仍然不会在移动设备上模糊。谢谢！ – bmfteixeira

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

回答

相关问题