Firefox中非常模糊的比例變換影片和懸停/點擊連接-有解無憂

代碼片段包含四個相同的模式，它們使用影片來調整比例。

在 Firefox 中，它們開始變得非常模糊并一直保持這種狀態，直到您將滑鼠懸停在視窗中的任意位置，或者在移動設備上點擊視窗中的任意位置。

（“運行代碼片段”是螢屏截圖的一部分） Firefox 中非常模糊的比例變換影片和懸停/點擊連接

當我在 Firefox 中懸停/點擊時，影像有時會顯示完整解析度，有時又會變得模糊。在示例影像中，只有一張影像達到了相當高的解析度。

（“運行代碼片段”是螢屏截圖的一部分） Firefox 中非常模糊的比例變換影片和懸停/點擊連接

也許作為圍繞懸停/點擊的作業可以自動生成，這樣它在 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>

uj5u.com熱心網友回復：

根據雅法問題（60796102）

這是Firefox優化的問題，您可以通過向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;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/476062.html

標籤：火狐 css 转换

上一篇：Visual Studio使用docker開發卡 vs2017u5 exists, deleting (vsdbg的問題)

下一篇：Visual Studio使用docker開發卡 vs2017u5 exists, deleting (vsdbg的問題)