使用边框半径和溢出渲染叠加到div：隐藏（仅限Chrome）

Question

在这里小提琴：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边框，这也可能不合适。