Firefox中的CSS轉換閃爍

我有3個元素使用CSS轉換在:hover上增長。其中兩個工作正常，但最後一個在Firefox中閃爍，但適用於Chrome和IE。所以這個問題只存在於Firefox中。Firefox中的CSS轉換閃爍

CSS：

.contact{ 
    width: 300px; 
    height: 250px; 
    margin: 10px; 
    margin-top: 37px; 
    float: right; 
    background-color: #eca83b; 
    border-radius: 10%; 
    transition: 0.5s; 
} 

.contact:hover{ 
    width: 320px; 
    margin: 0px; 
    margin-top: 27px; 
    height: 260px; 
}

HTML：

<section class="contact"> 
    <svg> 
    </svg> 
    <h2 class="item">Contact</h2> 
</section>

什麼會導致這個問題？

來源

2015-05-23 Morten Saabye Kristensen

我沒有看到任何閃爍 – Innervisions

最好定義你正在轉換的wat：'transition：all 0.5s;'''transition：width 0.5s，height 0.5s;'，在這裏讀你可以定義什麼： http://www.w3.org/TR/css3-transitions/#animatable-properties – Mark

我有完全一樣的問題：在幾個網站我建立的一個使用CSS變換規模，第一次將光標懸停在圖像上時，會出現閃爍。之後他們很好。不會發生在任何其他瀏覽器上，並且只是最近的 - 顯然是FF更高版本中的一個錯誤。

無論如何，只是修復了它，改變了灰度濾鏡。在img上試試這個CSS：

filter：greyscale（1％）;

它對顏色沒有不可忽略的差別，但閃爍消失了！

來源

2016-04-11 14:09:38

其實即使加入過濾器：灰度（0％）;爲我做了詭計。 –

backface-visibility: hidden傾向於解決很多閃爍的問題，請嘗試一下。

來源

2015-05-23 11:29:51 Luke

添加-moz-transition:爲Firefox我有更新的代碼在這裏試試這個它應該工作

.contact{ 
    width: 300px; 
    height: 250px; 
    margin: 10px; 
    margin-top: 37px; 
    float: right; 
    background-color: #eca83b; 
    border-radius: 10%; 
    transition: 0.5s; 
    -moz-transition: 0.5s; 
} 

.contact:hover{ 
    width: 320px; 
    margin: 0px; 
    margin-top: 27px; 
    height: 260px; 
}

來源

2015-05-24 06:14:10

嘗試把：

will-change: transform;

進入你的.contact

這將預渲染的對象轉換成3D因此它不應該閃爍。

有時它也有助於將它放入班級的孩子，就像你有 .contact > .img什麼的。

來源

2017-03-18 05:40:04

Firefox中的CSS轉換閃爍

回答

相關問題