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

Question

尝试在充当子图像遮罩的父元素上设置边框半径动画。这工作正常，除非图像有 position:absolute，在这种情况下我需要它。实际问题（在 Firefox 中工作正常）：

编辑：代码片段

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

我找到了解决办法。这是 position: absolute 禁用 overflow: hidden.

的 Webkit 引擎错误

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

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

webkit not animating border-radius on absolute positioned elements

css

animation

webkit