Hover.css 边框底部效果在 Opera 中无法正常工作

Question

我正在使用 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;
      }
    }
  }
}

有人可以帮我吗？

Answer 1

更新：

问题已修复。我删除了 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;
      }
    }
  }
}

Hover.css 边框底部效果在 Opera 中无法正常工作

Hover.css border bottom effect is not working properly in Opera

css

border

sass

hover