Egor Sorokin Egor Sorokin - 2 months ago 19
CSS Question

firefox 49, border-radius + overflow:hidden not working

I've made an animation for a button and it works OK for all last versions of browsers, but I had updated Firefox from v.48 to v.49 and after it my animation was broken. Please if anyone knows what exactly happened help me

example: https://jsfiddle.net/3woa73fz/ (the line to the left that appears and disappears)
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

inside ".button" try adding :

mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

after ".-webkit-mask-image"