It's probably a webkit bug (discussed here) and I'm trying to find a workaround for that.
The problem is that fixed div cuts by it's parent (which is smaller) at least in Safari on iOS 12.3.1
.container {
border: 1px solid gray;
width: 150px;
height: 150px;
overflow: scroll;
/* This should create a new stacking context, but not a containing block.
Safari does create a containing block for these instead :/
*/
opacity: 0.99;
/* same for these other properties:
position: fixed;
mix-blend-mode: multiply;
filter: blur(0px); */
}
.fixed {
position: fixed;
padding: 20px;
top: 40px;
left: 40px;
width: 150px;
background-color: orange;
}<div class="container">
<div class="fixed">
I should not get clipped!
</div>
</div>