Эффект нижней границы Hover.css не работает должным образом в Opera - PullRequest
Новая
       43

Эффект нижней границы Hover.css не работает должным образом в Opera

0 голосов
/ 12 февраля 2019

Я использую эффект наведения от hover.css.Он хорошо работает в любом браузере, кроме Opera.

Кажется, что это работает в Opera только когда я удаляю свойства: 

-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);

Но тогда, это не работает в Firefox.

Я также создал этоJSFiddle:

https://jsfiddle.net/ta4sju8n/20/

Но там, похоже, все работает нормально ...

HTML: 

<ul>
  <li><a href="#">Hover me</a></li>
  <li><a href="#">Hover me</a></li>
  <li><a href="#">Hover me</a></li>
</ul>

SCSS: 

body {
  background-color: black;
  color: white;
}

ul {
  list-style: none;
  li {
    padding: 10px;  
    a {
      display: inline-block;
      vertical-align: middle;
      -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-transform: perspective(1px) translateZ(0);
      transform: perspective(1px) translateZ(0);
      position: relative;
      overflow: hidden;
      color: white;
      margin-top: 10px;
      margin-bottom: 10px;
      padding-bottom: 8px;
      text-decoration: none;
      /* Border bottom animation */ 
      &:after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 100%;
        bottom: 0;
        background: white;
        height: 1px;
        -webkit-transition-property: right;
        transition-property: right;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
      }
      &:hover:after {
        right: 0;
      }
    }
  }
}

Кто-нибудь может мне здесь помочь?

1 Ответ

0 голосов
/ 12 февраля 2019

Обновление:

Исправлена ​​ошибка .Я удалил perspective(1px) и теперь свойство transform выглядит так: 

-webkit-transform: translateZ(0);
transform: translateZ(0);

Итоговый код: HTML: 

<ul>
  <li><a href="#">Hover me</a></li>
  <li><a href="#">Hover me</a></li>
  <li><a href="#">Hover me</a></li>
</ul>

SCSS: 

body {
  background-color: black;
  color: white;
}

ul {
  list-style: none;
  li {
    padding: 10px;  
    a {
      display: inline-block;
      vertical-align: middle;
      -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      position: relative;
      overflow: hidden;
      color: white;
      margin-top: 10px;
      margin-bottom: 10px;
      padding-bottom: 8px;
      text-decoration: none;
      /* Border bottom animation */ 
      &:after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 100%;
        bottom: 0;
        background: white;
        height: 1px;
        -webkit-transition-property: right;
        transition-property: right;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
      }
      &:hover:after {
        right: 0;
      }
    }
  }
}
...