CSS mask 和 clip-path 都阻碍了 Safari 页面上的其他元素

Question

我有一个项目，我需要同时使用剪辑路径和蒙版才能在 div 上获得某种渐变着色。我使用剪辑路径和遮罩来包含 div.

边界内的颜色

这在 Chrome 和 Firefox 中都可以正常工作。但在 Safari 中，其他元素仍然在被屏蔽的元素后面，无法进行交互。正如您在下面的代码片段中看到的，我添加了 2 个示例。一个使用剪辑路径，另一个使用遮罩。在 Safari 中，无法与绿色 div 进行交互。

#clip-container {
  width: 4rem;
  height: 3rem;
  background-color: yellow;
  clip-path: inset(0);
}

#clip-container::after {
  content: '';
  position: absolute;
  width: 5rem;
  height: 6rem;
  background-color: red;
}

#covered-container {
  width: 4rem;
  height: 2rem;
  background-color: green;
}

#covered-container:hover {
  background-color: purple;
}

#mask-container {
  margin-top: 3rem;
  width: 4rem;
  height: 3rem;
  border: 1px solid blue;
  -webkit-mask: linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0);
}

#mask-container::after {
  content: '';
  position: absolute;
  width: 5rem;
  height: 6rem;
  background-color: pink;
}

#second-covered-container {
  width: 4rem;
  height: 2rem;
  background-color: green;
}

#second-covered-container:hover {
  background-color: purple;
}

<div id="clip-container"></div>
<div id="covered-container"></div>

<div id="mask-container"></div>
<div id="second-covered-container"></div>

Answer 1

自行控制堆叠上下文，不要保留默认设置：

#clip-container {
  width: 4rem;
  height: 3rem;
  background-color: yellow;
  clip-path: inset(0);
  position:relative;
  z-index:0;
}

#clip-container::after {
  content: '';
  position: absolute;
  z-index:-1;
  width: 5rem;
  height: 6rem;
  background-color: red;
}

#covered-container {
  width: 4rem;
  height: 2rem;
  background-color: green;
  position:relative;
}

#covered-container:hover {
  background-color: purple;
}

#mask-container {
  margin-top: 3rem;
  width: 4rem;
  height: 3rem;
  border: 1px solid blue;
  -webkit-mask: linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0);
}

#mask-container::after {
  content: '';
  position: absolute;
  z-index:-1;
  width: 5rem;
  height: 6rem;
  background-color: pink;
}

#second-covered-container {
  width: 4rem;
  height: 2rem;
  background-color: green;
  position:relative;
}

#second-covered-container:hover {
  background-color: purple;
}

<div id="clip-container"></div>
<div id="covered-container"></div>

<div id="mask-container"></div>
<div id="second-covered-container"></div>

CSS mask 和 clip-path 都阻碍了 Safari 页面上的其他元素

CSS mask and clip-path both obstruct other elements in on the page in Safari

html

css

clip-path

css-mask