的Firefox 49，邊界半徑+溢出：隱藏不工作

我做了一個按鈕的動畫，它適用於所有瀏覽器版本的最後確定，但我已經更新火狐從五.48至訴49後，我的動畫被打破。如有人知道到底發生了什麼幫我的Firefox 49，邊界半徑+溢出：隱藏不工作

例如：https://jsfiddle.net/3woa73fz/（該線出現和消失左） 代碼：

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

來源

2016-09-26 Egor Sorokin

裏面".button"嘗試添加：

掩模：URL（數據：圖像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA + oJAAAAAElFTkSuQmCC）;

後".-webkit-mask-image"

來源

2016-09-26 06:50:02 partypete25

謝謝！現在效果很好 –

的Firefox 49，邊界半徑+溢出：隱藏不工作

回答

相關問題