css - CSS Box Shadow 扩展 DOM 元素的点击区域（Safari）

Question

在 Safari 上，当在具有溢出子box-shadow元素的父元素上使用 CSS时，父元素的单击区域似乎包括右侧的框阴影。有人知道如何避免这种行为吗？position: relativeoverflow: hidden

从父元素中移除position: relative时，行为符合预期，但是当我们想要绝对定位元素时，这可能不是一个选项（并且在不知道导致此问题的实际问题的情况下做某事也不令人满意）。

.container-1 {
  margin: 64px;
}

.container-1-1 {
  display: block;
  background-color: #00f;
  cursor: pointer;
  box-shadow: 0 16px 32px 0 #000f1e;
  overflow: hidden;
}

.container-1-1-1 {
  width: 110%;
  background-color: #008000;
}

.position-relative {
  position: relative;
}

<div class="container-1">
  <div class="container-1-1 position-relative">
    <div class="container-1-1-1">click area overflows to the right</div>
  </div>
</div>
<div class="container-1">
  <div class="container-1-1">
    <div class="container-1-1-1">no click area overflow</div>
  </div>
</div>

在 JSFiddle 上查看

标签： csssafari