悬停bug：在On Safari之前

Question

我在导航链接上使用下划线显示悬停效果。当我在Safari上悬停时，第一个悬停背景会根据我的css显示，但是我看到的是橙色背景。我发现如果删除伪元素的高度，这个橙色背景就不可见了。

 @mixin underline-reveal {

    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
     position: relative;
     overflow: hidden;
     }


     @mixin underline-reveal-before ($color) {
     content: "";
     position: absolute;
     z-index: -1;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: $color;
     height: 3px;
     -webkit-transform: translateY(4px);
     transform: translateY(4px);
     -webkit-transition-property: transform;
     transition-property: transform;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-timing-function: ease-out;
     transition-timing-function: ease-out;
     }

Answer 1

通常最好的解决方法是在Safari中具有转换的元素上添加-webkit-transform：translate3d（0,0,0）。

就我而言：

  ul {
    @include menu-base;
    background-color: $blue;
    line-height: 2.5;

    > li {
        display: inline-block;

        > a {
            @include mainnav-align-a;
            @include underline-reveal;
        }

        > a::before {
            @include underline-reveal-before (#EDEDED);
            height: 3px;
        }

         > a:focus,
        > a:hover {
            background-color: $hover-blue;
        }

         > a:focus::before,
        > a:hover::before {
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
              <!--Fix bugs ON Safari-->
            -webkit-transform: translate3d(0, 0, 0);
        }

        a.active:before {
            display: none;
        }
    }
}