firefox 49,border-radius + overflow:hidden 不工作
firefox 49, border-radius + overflow:hidden not working
我为按钮制作了一个动画,它适用于所有最新版本的浏览器,但我已将 Firefox 从 v.48 更新到 v.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;
}
}
在 ".button"
中尝试添加:
掩码:url(数据:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA2+CCoJAASU];[
在".-webkit-mask-image"
之后
我为按钮制作了一个动画,它适用于所有最新版本的浏览器,但我已将 Firefox 从 v.48 更新到 v.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;
}
}
在 ".button"
中尝试添加:
掩码:url(数据:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA2+CCoJAASU];[
在".-webkit-mask-image"