transform-css上的模糊字体

Question

所以，我有一个下拉菜单，这是悬停事件上动画的css

.secondary_nav {
  display: none;
}

.primary_nav > ul > li:hover {
  perspective: 1000px;
}

primary_nav > ul > li:hover .secondary_nav {
  display: block;
  opacity: 0;
  animation: dropdown 300ms ease-in-out forwards;
}

@keyframes dropdown {
  0% {
   opacity: 0;
   transform: rotateY(-90deg) translateY(30px);
  }
  100% {
   opacity: 1;
   transform: rotateY(0deg) translateY(0px);
  }
}

事实是，字体在li上看起来太模糊了，我的意思是，区别很明显（虽然还不错，但是就像cleartype一样-对于那些Windows用户-神奇地关闭了），并且这两种情况都在Chrome上发生了和Firefox。但是，这些li的子菜单不受影响。

如果我移除了transform属性，一切看起来都会很好。

任何人都知道如何解决它？没什么大不了的，但是很烦人。

已经尝试添加-webkit-font-smoothing：antialiased;，但是它不起作用。

谢谢大家。

Answer 1

这是HTML的结构，对不起，我忘了。

<div class="primary_nav"> 
  <ul data-role="primaryNavBar"> 
   <li> 
    <a href="">Example</a> 
    <ul class="secondary_nav">
     <li>...</li>
     <li>...</li>
    </ul> 
   </li> 
  </ul> 
</div>