CSS mask 和 mask-composite 在 Safari 14 中不起作用

Question

http://hisidi.kr/2023/100/

在这个网站中，我使用遮罩和遮罩复合遮罩了屏幕顶部和底部的圆形空间。

但是在 Safari 14 中，它无法正常工作（也许是因为该版本不支持 mask-composite？）有什么办法让这个形状在 Safari 14 中也能发挥作用？

.hundred_top {
    pointer-events: none;
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    height: 100.6%;
    background-color: black;
    -webkit-mask:
        radial-gradient(circle at 25% bottom, transparent 31.6%, black 31.6%),
        radial-gradient(circle at 75% bottom, transparent 31.6%, black 31.6%),
        radial-gradient(black, black);
    mask:
        radial-gradient(circle at 25% bottom, transparent 31.6%, black 31.6%),
        radial-gradient(circle at 75% bottom, transparent 31.6%, black 31.6%),
        radial-gradient(black, black);
    mask-composite: exclude;
}

.hundred_bottom {
    pointer-events: none;
    position: relative;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100.6%;
    background-color: black;
    -webkit-mask:
        radial-gradient(circle at 25% top, transparent 31.6%, black 31.6%),
        radial-gradient(circle at 75% top, transparent 31.6%, black 31.6%),
        radial-gradient(black, black);
    mask:
        radial-gradient(circle at 25% top, transparent 31.6%, black 31.6%),
        radial-gradient(circle at 75% top, transparent 31.6%, black 31.6%),
        radial-gradient(black, black);
    mask-composite: exclude;
}

@supports (-webkit-mask-composite: destination-in) and (not (mask-composite: exclude)) {
    .hundred_top,
    .hundred_bottom {
        -webkit-mask-composite: destination-in;
    }
}

我为以前版本的 Safari 和 Chrome 添加了 @supports 代码。它在 Safari 15 中有效，但在 14 版本中无效。

Answer 1

不做

mask-composite

.box {
  width: 400px;
  aspect-ratio: 4;
  background-color: black;
  margin: 40px;
}
.top {
  -webkit-mask:
     radial-gradient(50% 100% at bottom,#0000 99%,#000)
     0/50% 100%;
}

.bottom {
  -webkit-mask:
     radial-gradient(50% 100% at top   ,#0000 99%,#000)
     0/50% 100%;
}

<div class="box top"></div>
<div class="box bottom"></div>