css - 渲染叠加到具有边界半径和溢出 : hidden (Chrome only) 的 div

Question

在这里 fiddle :https://jsfiddle.net/mengma/8k5pekrr/1/

此问题仅适用于 Chrome - 叠加层不会覆盖整个屏幕。删除 border-radius 或 overflow css 不会有这个问题。想绕过它吗？似乎是最新 Chrome 的一个错误(之前没有看到)

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

Answer 1

我遇到了同样的问题。我发现在对话框中添加一个大于 border-radius 的透明边框可以解决这个问题。

div.dialog { border: solid 5px transparent; }

在您的情况下，它将替换您的黑色 1px 边框，这也可能是不可取的。