在CSS轉換期間閃爍的錯誤

我目前正在爲我的博客製作一個新主題，而且我遇到了標題問題。看，標題在頂部有一個固定的位置，就像一個導航欄，當用戶向下滾動時它會縮小。但是，在某些瀏覽器（主要是Chrome瀏覽器，尤其是Windows）上，標題上的Twitter圖標有一種奇怪的閃爍行爲，會持續十分之一秒左右。在CSS轉換期間閃爍的錯誤

我在使用過渡時看到了很多關於Chrome中閃爍錯誤的東西，但沒有看起來像這樣的東西（另外，修復程序並不適用於我的情況）。這是圖標邊距和標題高度的簡單轉換。

有沒有人看過類似的東西？

非常感謝！

編輯：重新創建它在小提琴。問題還在這裏：http://jsfiddle.net/PVmgz/

HTML`

<header> 
     <div class="container header"> 
      <a href="#" title="MangeMonBeat"><div id="logo">Logo</div></a> 
      <div class="social"> 
       <div class="search icon"> 

       </div> 
       <div class="facebook icon"> 
       </div> 
        <div class="twitter icon"> 
        </div> 
      </div> 
     </div> 
    </header> 

     <div id="button">Scroll</div>

CSS

header { 
    width: 100%; 
    height: 98px; 
    background: #EEE; 
    position: fixed; 
    top: 0; 
    z-index: 9999; 
    -webkit-transition: height, ease-in, 0.4s; 
     -moz-transition: height, ease-in, 0.4s; 
     -ms-transition: height, ease-in, 0.4s; 
     -o-transition: height, ease-in, 0.4s; 
      transition: height, ease-in, 0.4s; 
} 

header.scroll { 
    height: 60px; 
} 
header.scroll .header #logo { 
    width: 350px; 
    height:50px; 
} 
header.scroll .header .social { 
    margin-top: -2px; 
} 
header.scroll .header .social .icon { 
    margin-left: 2px; 
} 

.header { 
    padding: 5px 10px 0; 
} 

.header #logo { 
    width: 400px; 
    height:82px; 
    background: #696; 
    color:white; 
    float: left; 
    -webkit-transition: width, ease-in, 0.4s; 
     -moz-transition: width, ease-in, 0.4s; 
     -ms-transition: width, ease-in, 0.4s; 
     -o-transition: width, ease-in, 0.4s; 
      transition: width, ease-in, 0.4s; 
} 

.header #logo img { 
    max-width: 100%; 
    height: auto; 
} 

.header .social { 
    float: right; 
    margin-top: 19px; 
    -webkit-transition: margin-top, ease-in, 0.4s; 
     -moz-transition: margin-top, ease-in, 0.4s; 
     -ms-transition: margin-top, ease-in, 0.4s; 
     -o-transition: margin-top, ease-in, 0.4s; 
      transition: margin-top, ease-in, 0.4s; 
} 

.header .social .icon { 
    display: inline-block; 
    margin-left: 20px; 
    width: 51px; 
    height: 51px; 
    border-radius:999px; 
    -webkit-transition: margin-left, ease-in, 0.4s; 
     -moz-transition: margin-left, ease-in, 0.4s; 
     -ms-transition: margin-left, ease-in, 0.4s; 
     -o-transition: margin-left, ease-in, 0.4s; 
      transition: margin-left, ease-in, 0.4s; 
} 

.header .social .icon.facebook { 
    position: relative; 
    background:#336699; 
} 

.header .social .icon.twitter { 
    position: relative; 
    background:#66cccc; 
}

來源

2012-10-24 user1537927

安置自己的代碼在這裏！這個環節可能在某個時候死亡，這些問題和解決方案必須繼續存在。如果你製作了一個JSFiddle，它也會很好，所以我們可以輕鬆地使用你的代碼來嘗試和幫助你。 – jmeas

當然，一旦我清理乾淨，一分鐘就能完成！ – user1537927

所以我對這個問題的一個可能的解釋，有的代碼這絕對可以解決它。

可能的解釋是，縮小的社交媒體圖標有時會四捨五入。當它們縮小時，它可能會計算26.6像素的寬度，當然它必須始終顯示爲整數個像素。當它輪到27像素時，這會將最後一個社交媒體圖標擊倒到下一個級別。如果這是正確的，它會閃爍，因爲它會繼續縮小，計算26個像素，這是一個O.K.價值，而不會下降。但是，它立即變爲25.9像素，再次降低。如果這確實是正確的，它實際上會比我給出的簡單解釋（父元素的寬度起作用）複雜一點，但這足以讓這個想法貫穿始終。

無論如何，一個可行的解決方案是讓圖標具有寬度的div，這樣就有了「呼吸空間」，如果願意，圖標可以擴展。

下面是一些代碼給它的空間，但是您需要優化它以便按需顯示。

.header .social { 
    ... 
    width: 500px; 
}

我一個解決方案最初的想法將是集這div的width，則浮動圖標內的權利。

來源

2012-10-24 11:40:47 jmeas

它的工作原理，它的工作原理！你是我的英雄。 – user1537927

有點晚了答案，但我只是在轉換裕度左值時遇到這個問題。
該解決方案是「邊框間距」設定以

來源

2013-12-05 15:20:13 n1kkou

在CSS轉換期間閃爍的錯誤

回答

相關問題