I'm experiencing a strange result in Safari where it seems the CSS attribute mix-blend-mode seems to stop overlow:hidden of the parent (.numWrap) div from working. The example below is a snippet of the overall project, which is a flip-style timer app.
The use of mix-blend-mode is preferred as allows the shading to more naturally fall on the card below.
Behaviour in Safari (all devices)
See below some CSS/HTML I've isolated, exhibiting this behaviour.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #aeccab;
}
.numWrap {
font-size: 80pt;
width: 500px;
height: 500px;
display: flex;
border: 1px solid rgb(255, 0, 0);
flex-direction: column;
align-items: center;
overflow: hidden;
position: relative;
border-radius: 2rem;
z-index: 25;
}
.numWrap-shadow {
position: absolute;
/*top: 0;
bottom: 0;
border-radius: 2rem;
/*background: linear-gradient(to right bottom,
rgba(226, 219, 205, 0.753),
rgba(255, 255, 255, 0.1));*/
/*left: 0;
backface-visibility: hidden;
right: 0;*/
border-radius: 2rem;
border: 1px solid rgb(67, 29, 204);
mix-blend-mode: multiply;
width: 100%;
height: 100%;
box-shadow: inset 18px 18px 36px #a1a1a1c8;
z-index: 19;
}
.time,
.time-alt {
color: rgba(76, 85, 71, 0.876);
border: 1px dashed rgb(230, 0, 255);
height: 100%;
width: 100%;
font-size: 300%;
text-align: center;
align-items: center;
transition: linear;
transition-duration: 200ms;
transition-property: transform;
overflow: hidden;
position: absolute;
display: flex;
justify-content: center;
transform: translateY(0%);
will-change: transform;
background-color: #dedede;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
</style>
</head>
<body>
<div class="numWrap hoursWrap">
<div class="numWrap-shadow"></div>
<div class="time-alt time--hours inactive"><span>00</span></div>
<div class="time time--hours"><span>00</span></div>
</div>
</body>
</html>
I've worked through all parts of the relevant CSS to identify the issue. Disabling the mix-blend-mode within DevTools returns to the expected behaviour. This is not an issue in Chrome or Firefox (where most of my live testing has occured).
If anyone encounters this issue, I have solved it. I think it has something to do with WebKit handling stacking contexts oddly (though I'm not clear on what that means).
To solve this, I moved numWrap-shadow out of the numWrap div and created a new container div for both, transferring the necessary attributes.
If anyone has further questions, happy to expand where I can!