css - Clip-path 不会影响 Safari 中元素的顺序

Question

考虑以下代码（小提琴）：

$("*").on("click", function(e) {
  console.log(e.currentTarget.classList)
  return false
})

.bg {
  width: 500px;
  height: 500px;
  background: lightblue;
  position: relative;
}

.positioned {
  width: 400px;
  height: 250px;
  background: green;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.positioned_parent {
  clip-path: inset(100% 0);
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="bg">
 <div class="positioned_parent">
   <div class="positioned">
  </div>
 </div>
</div>

我已使用剪辑路径.positioned_parent从文档中的视图中删除。但是，它仍然是 Safari（但不是 Chrome）中点击事件的目标。

我正在寻找一种使用方法clip-path: inset()，当我剪掉元素的一部分时，用户将无法再点击它。我怎样才能做到这一点？

标签： cssz-indexclip-path