webkit不为绝对定位元素设置border-radius动画

Question

尝试在父元素上设置border-radius动画，作为子图像上的蒙版。这个工作正常，除非图像有position:absolute，在这种情况下我需要它。行动中的问题（在Firefox中正常工作）：

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

编辑：代码段

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 1

我找到了解决方案。这是Webkit引擎上的一个错误，position: absolute禁用了overflow: hidden。

解决问题的最佳方法是使用蒙版在元素上添加-webkit-mask-image。在这种情况下，它是一个像素，并作为base64图像嵌入。

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>