Rendering overlay to div with border radius and overflow: hidden (Chrome only)
Fiddle here: https://jsfiddle.net/mengma/8k5pekrr/1/
This problem is Chrome only - overlay won't cover the whole screen. Removing either the border-radius or overflow css will not have this issue. Any idea to by pass it? Seems to be a bug with latest Chrome (not seeing it before)
<div class="dialog">
<div>
dialog <a href="http://google.com">click</a>
</div>
<div class="fadeMe"></div>
</div>
div.dialog {
width: 50px;
height: 50px;
position: absolute;
top: 20px;
border-radius: 4px;
border: none;
left: 20px;
z-index: 12;
border: solid 1px #000;
overflow: hidden;
}
div.fadeMe {
opacity: 0.5;
background: #ccc;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
I was experiencing the same issue. I discovered that adding a transparent border to your dialog that is larger than your border-radius will fix it.
div.dialog { border: solid 5px transparent; }
In your case, it will replace your black 1px border, which also may not be desirable.
链接地址: http://www.djcxy.com/p/75532.html