在 Safari 上使用 :before 悬停错误答案

【问题标题】：Hover bugs with :before On Safari在 Safari 上使用 :before 悬停错误
【发布时间】：2017-02-04 09:42:05
【问题描述】：

我在导航链接上使用下划线显示悬停效果。当我将鼠标悬停在 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;
     }

【问题讨论】：

标签： css debugging safari css-selectors hover

【解决方案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;
        }
    }
}

【讨论】：