firefox 49, border-radius + überlauf: versteckt nicht funktioniert

Question

Ich habe eine Animation für eine Schaltfläche gemacht und es funktioniert OK für alle letzten Versionen von Browsern, aber ich hatte aktualisiert Firefox von v.48 bis v. 49 und danach war meine Animation kaputt. Bitte, wenn jemand weiß, was genau helfen passierte mir

Beispiel:https://jsfiddle.net/3woa73fz/ (die Linie nach links, das erscheint und verschwindet) Code:

HTML:

<div class="button__container"> 
    <a href="#" class="button"> 
    <span class="button__text">Learn More</span> 
    </a> 
</div> 

CSS:

.button { 
    &__container { 
    position: relative; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    } 

    overflow: hidden; 
    display: inline-block; 
    position: relative; 
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 

    height: 54px; 

    margin: 0 auto; 
    padding: 15px 38px 14px 37px; 

    background-color: transparent; 
    border-radius: 200px; 

    color: transparent; 

    cursor: pointer; 

    &:before { 
    content: ''; 

    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 

    background-color: #fff; 

    transform: translateX(-100%); 

    transition: transform 0.3s ease; 
    } 
    &:after { 
    content: ''; 

    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 

    border: 2px solid rgba(255, 255, 255, 0.5); 
    border-radius: inherit; 

    transition: border 0.3s ease; 

    z-index: 1; 
    } 
    &__text { 
    position: relative; 

    font-family: sans-serif; 
    font-size: 16px; 
    font-weight: 400; 
    color: #fff; 

    transition: color 0.3s ease; 
    } 
} 

.button:hover:before { 
    transform: translateX(0); 
    } 
    .button:hover:after { 
    border-color: #fff; 
    } 
    .button:hover .button__text { 
    color: #24BE51; 
    } 
} 

Answer 1

innerhalb ".button" Versuchen Sie:

Maske: url (Daten: image/jpeg; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA + oJAAAAAElFTkSuQmCC);

nach ".-webkit-mask-image"