Question

所以我的问题是使用css掩码来隐藏position: fixed;项。原因是显然overflow: hidden;不起作用。所以这实际上在所有浏览器中游泳，我在UNTIL中测试它，包含蒙版的div的高度达到一个特定的，看似任意的高度。（iPad上为1280像素，桌面Safari为2000像素）

我对此完全感到困惑，并没有找到任何人在这个问题上有任何文件。有没有人使用css面具可能有一些线索，为什么会出现这种情况？

这是一个演示错误的截屏视频以及用于生成错误的代码。 https://www.dropbox.com/s/bxzsmkqgll1yeix/Screeny%20Video%20Feb%2010%2C%202014%2C%209.18.28%20PM.mov

这是一个带有该演示中使用的代码的zip。 http://cl.ly/Tqy7

任何想法或建议的解决方案？

--- 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%;
}

Answer 1

非常感谢你们。哈哈。

我最终做的是在蒙版元素上设置max-height属性，直到该元素到达浏览器窗口的顶部。无论如何，我的模糊图像文本在此时消失了，所以这是一个好时机，一旦图像消失，删除max-height属性。工作得很好，虽然我有一天仍然喜欢解决原来的问题。我猜它是一个浏览器的怪癖但看到它是如此随意的一致。

CSS mask max-height bug

1 个答案: