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动画导致模糊文本里面的单独元素

回答

相关问题