webkit没有在绝对定位的元素上为边框半径设置动画答案

【问题标题】：webkit not animating border-radius on absolute positioned elementswebkit没有在绝对定位的元素上为边框半径设置动画
【发布时间】：2016-12-26 18:17:16
【问题描述】：

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

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

edit:code sn-ps

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>

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。虽然您提供了link to an example or site，但如果链接失效，您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。
只是为了增加更多的阴谋；如果您调整预览大小，您实际上会看到边框半径蒙版在起作用。也许有人知道如何通过 CSS 或 JS 触发重排
我在手机里，现在无法提供答案，但在我看来，这是 SVG 用途的完美示例。您应该尽量避免因渲染而影响性能的动画属性，例如宽度、高度、边框半径等。 CSS 动画应该坚持不透明度和变换。

标签： css animation webkit

【解决方案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>

【讨论】：

哇，真是个奇怪的错误。非常感谢您的解决方案。我自己永远不会想出这个。