peirix peirix - 3 months ago 18
CSS Question

webkit not animating border-radius on absolute positioned elements

Trying to animate border-radius on a parent element acting as mask on child images. This works fine unless the image has

position:absolute
, which I need in this case. The problem in action (works fine in Firefox):

https://jsfiddle.net/dcm5kwvp/2/

edit:code snippets



setTimeout(function() {
document.querySelector('.mask').classList.add('loaded');
}, 100);

.mask {
width: 100%;
height: 300px;
border-radius: 0;
transition: border-radius .3s ease;
overflow: hidden;
position: relative;
z-index: 1;
}

.mask.loaded {
border-radius: 0 0 50% 50%;
}

figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
}

<div class="mask">
<figure>
<img srcset="https://images.unsplash.com/photo-1470434151738-dc5f4474c239?dpr=1&auto=format&crop=entropy&fit=crop&w=1199&h=799&q=80&cs=tinysrgb">
</figure>
</div>




Answer

I've found a solution. This is a bug on Webkit engine with position: absolute disabling overflow: hidden.

The best way to solve it is to add a -webkit-mask-image on your element with a mask. In this case, it's a single pixel, and embeded as a base64 image.

setTimeout(function() {
	document.querySelector('.mask').classList.add('loaded');
}, 100);
.mask {
  width: 100%;
  height: 300px;
  border-radius: 0 0 0 0;
  transition: border-radius .3s ease;
  overflow: hidden;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
  position: relative;
}

.mask.loaded {
  border-radius: 0 0 50% 50%;
}

figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
<div class="mask">
<figure>
  <img srcset="https://images.unsplash.com/photo-1470434151738-dc5f4474c239?dpr=1&auto=format&crop=entropy&fit=crop&w=1199&h=799&q=80&cs=tinysrgb">
</figure>
</div>

Comments