css - webkit 不在绝对定位元素上设置边框半径动画

Question

尝试在充当子图像 mask 的父元素上为 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。

解决它的最佳方法是在带有 mask 的元素上添加 -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>