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

问题描述

我有一个项目，我需要同时使用剪​​辑路径和蒙版，以便在 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>

解决方法

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

#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>