CSS Box Shadow расширяет область нажатия элемента DOM (Safari)

Question

В Safari, при использовании CSS box-shadow на родительском элементе с position: relative и overflow: 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