Css webkit动画导致分离元素中的文本模糊

我使用-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

---

不管出于什么原因，悬停时文本会变得模糊。我在IE和Mozilla中进行了测试，效果很好，所以只能在Chrome中使用

尝试将此css添加到模糊文本中（我假设它是示例中的ul元素）。如果您的列表包含锚定，请确保您的目标是锚定。否则，只要

li

就可以了

所以要么

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

或者

---

我遇到了一个类似的问题，我最终通过选择文本并应用的选择器进行了修复：

li p {transform:none}

希望这有帮助

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

li p {transform:none}