I've encountered an issue with using a css mask to hide a position: fixed; item because overflow: hidden; does not seem to work as expected. Everything functions perfectly in all browsers until the height of the div containing the mask reaches a certain height, like 1280px on iPad or 2000px on desktop Safari.
I haven't been able to find any information or documentation on this specific problem and I'm really stuck. Has anyone else experienced issues with css masks that might provide some insight into why this is happening?
For reference, here's a screencast demonstrating the bug and the code used to replicate it:
Additionally, you can access the code used in the demo by downloading this zip file:
If anyone has any ideas or potential solutions to this issue, I would greatly appreciate the help!
--- HTML ---
<div class="attn hairline"></div>
<div class="shadow"></div>
<div id="home">
<div class="attn blur"></div>
<div id="content">
<p>Hey, here is some awesome content, stuff you will definitely want to read.</p>
</div>
</div>
--- CSS ---
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
text-align: center;
background-color: #f0f0f0;
}
.attn {
position: fixed;
width: 80%;
height: 100%;
left: 50%;
margin-left: -40%;
background: no-repeat center;
background-size: 100% auto;
}
.hairline {
background-image: url(../img/attn.svg);
}
.blur {
background-image: url(../img/blur.png);
}
.shadow {
position: relative;
height: 20px;
margin-bottom: -20px;
box-shadow: 0px -3px 6px rgba(0,0,0,.1);
top: 100%;
}
#home {
position: relative;
top: 100%;
background: #fff;
mask: url(../img/mask.svg);
-webkit-mask: url(../img/mask.svg);
-o-mask: url(../img/mask.svg);
-ms-mask: url(../img/mask.svg);
/* 1281px will kill the mask on iPad, 2001px will kill it on the desktop */
height: 1280px;
}
#content {
padding: 10% 5%;
}