Css webkit動畫導致模糊文本里面的單獨元素

我使用-webkit動畫製作和圖標在菜單旋轉時，徘徊。如果點擊它，則會出現一個下拉菜單，並顯示模糊的文字。直到我將光標從圖標上移開，文字才恢復正常。現在對我來說這很奇怪，因爲動畫是在一個單獨的元素造成模糊，我不明白爲什麼。Css webkit動畫導致模糊文本里面的單獨元素

所以我有這樣的事情。

<li class="drop"> 
    <a href="#" class="drop-toggle"> 
     <span class="nav-icon settings"></span> 
    </a> 
    <div class="drop-menu"> 
     <ul role="menu"> 
     ....my list with text

然後，我讓圖標像這樣旋轉。

.nav-icon { 
    position: relative; 
    display: block; 
    width: 32px; 
    height: 32px; 
    background-image: url("images/menu-sprite.png"); 
} 
.nav-icon.settings { 
    background-position: 0 0; 
} 
@-webkit-keyframes spin { 
    0% { -webkit-transform: rotate(0deg);} 
    100% { -webkit-transform: rotate(360deg);} 
} 
@-moz-keyframes spin { 
    0% { -moz-transform: rotate(0deg);} 
    100% { -moz-transform: rotate(360deg);} 
} 
@-o-keyframes spin { 
    0% { -o-transform: rotate(0deg);} 
    100% { -o-transform: rotate(360deg);} 
} 
@-ms-keyframes spin { 
    0% { -ms-transform: rotate(0deg);} 
    100% { -ms-transform: rotate(360deg);} 
} 
.nav-icon.settings:hover { 
    -webkit-animation: spin 2.7s infinite linear; 
    -moz-animation: spin 2.7s infinite linear; 
    -o-animation: spin 2.7s infinite linear; 
    -ms-animation: spin 2.7s infinite linear; 
}

無論出於何種原因，使文本模糊懸停。我在IE和Mozilla中測試過，並且它只在Chrome中運行良好。

來源

2014-09-25 user300979

嘗試將這個CSS添加到模糊的文本（我假設它是你的例子中的ul元素）。如果你的列表包含一個錨，請確保你的目標。否則只要li應該沒問題。

所以要麼...

.drop-menu ul li { 
    -webkit-transform: translateZ(0px); 
}

或...

.drop-menu ul li a { 
    -webkit-transform: translateZ(0px); 
}

來源

2015-05-28 16:04:59 Ivan

我有一個類似的問題，我終於固定選擇選擇文本和應用：

li p {transform:none}

希望這有助於！

來源

2016-11-18 18:37:24

Css webkit動畫導致模糊文本里面的單獨元素

回答

相關問題