Firefox 中非常模糊的缩放变换动画以及与 hover/tap 的连接

Question

该代码片段涉及四个使用动画调整比例的相同模式。

在 Firefox 中，它们开始时非常模糊，并一直保持这种状态，直到您将鼠标悬停在 window 中的任意位置，或者如果您在移动设备上点击 window 中的任意位置。

(“运行代码段”是截图的一部分)

当我在 Firefox 中 hover/tap 时，图像有时会显示全分辨率，有时又会变得模糊。在示例图像中，只有一张图像达到了相当高的分辨率。

(“运行代码段”是截图的一部分)

也许可以自动生成 hover/tap 以使其在 Firefox 中不模糊。也许它与缓存有关，并且最初图像的大小为 0% 或 1%。有什么想法吗？

参见：

.target {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-image: url('data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH+EUNyZWF0ZWQgd2l0aCBHSU1QACwAAAAAKAAoAAACjoSPqcvtD6OctL6As968a+aF4gaOpleeapYGlvIt8XvMiU3jNUvvWItYuXxDGM8gDB5vyyQRSDQpf7LmcloE6JBWqtGrvT7H3+w2DD7b1N0s9l1Ni7lyMJzuJqPz+DuzzreHJaXn59QXZ7biZ7hY+GjBZvciGUhR2QO5J0RYxjnS8ikSKoqSeYqaqrpKUQAAOw==');
    background-size: contain;
    
}
.pic1 {
    animation: zoom1 3s 0s infinite normal linear;
}
.pic2 {
    animation: zoom2 3s 0s infinite normal linear;
}
.pic3 {
    animation: zoom3 3s 0s infinite normal linear;
}
.pic4 {
    animation: zoom4 3s 0s infinite normal linear;
}
@keyframes zoom1 {
    0%   { transform: scale(0.0); }
    25%  { transform: scale(1.0); }
}
@keyframes zoom2 {
    0%   { transform: scale(0.0); }
    25%  { transform: scale(0.0); }
    50%  { transform: scale(1.0); }
}
@keyframes zoom3 {
    0%   { transform: scale(0.0); }
    50%  { transform: scale(0.0); }
    75%  { transform: scale(1.0); }
}
@keyframes zoom4 {
    0%   { transform: scale(0.0); }
    75%  { transform: scale(0.0); }
    100%  { transform: scale(1.0); }
}

<div class="target pic1"></div>
<div class="target pic2"></div>
<div class="target pic3"></div>
<div class="target pic4"></div>

Answer 1

根据 jaffa 问题 (60796102)

Firefox优化问题，在目标class中添加backface-visibility: hidden;属性即可解决。我在 Firefox 上测试过，一切正常。

.target {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-image: url('data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH+EUNyZWF0ZWQgd2l0aCBHSU1QACwAAAAAKAAoAAACjoSPqcvtD6OctL6As968a+aF4gaOpleeapYGlvIt8XvMiU3jNUvvWItYuXxDGM8gDB5vyyQRSDQpf7LmcloE6JBWqtGrvT7H3+w2DD7b1N0s9l1Ni7lyMJzuJqPz+DuzzreHJaXn59QXZ7biZ7hY+GjBZvciGUhR2QO5J0RYxjnS8ikSKoqSeYqaqrpKUQAAOw==');
    background-size: contain;
    backface-visibility: hidden;
}

Firefox 中非常模糊的缩放变换动画以及与 hover/tap 的连接

Very blurry scale transform animations in Firefox and connection with hover/tap

firefox

css-transforms