On Safari, when using CSS box-shadow on a parent element with position: relative and overflow: hidden that has a overflowing child, the click area of the parent element seems to include the box shadow to the right. Does somebody know how to avoid this behaviour?
When removing position: relative from the parent element, the behaviour is as expected, but that might not be an option when we want to position elements absolutely (and also not satisfying to do something without knowing the actual issue causing this).
.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>