Размытые шрифты на transform- css - PullRequest
Новая
       18

Размытые шрифты на transform- css

0 голосов
/ 05 апреля 2020

Итак, у меня есть выпадающее меню, это мой css для анимации события hover 

.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);
  }
}

Дело в том, что шрифты выглядят так размыто на ли, я имею в виду, разница заметна (это не так уж и плохо, но это похоже на cleartype - для тех Windows пользователей - волшебным образом отключаются), и это происходит как на Chrome, так и Firefox. Подменю этих li, однако, не затрагиваются.

Если я снимаю свойство transform, все выглядит хорошо.

Кто-нибудь знает, как это исправить? Ничего страшного, но это так раздражает.

Уже пытался добавить -webkit-font-smoothing: antialiased; , но он не работает.

Спасибо всем заранее.

Это структура 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>
...