Hover over:

Question

I use an underline that shows the effects of hovering over navigation links. When I am on Safari, the first hover background appears according to my css, but I see an orange background. I found that if you remove the height of the pseudo-elements, this orange background will not be visible.

 @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

Usually the best solution is to add -webkit-transform: translate3d (0,0,0) to elements that have a transition in Safari.

In my case:

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