渲染覆蓋與邊界半徑和溢出的div：隱藏器（Chrome只）

Question

小提琴這裏：https://jsfiddle.net/mengma/8k5pekrr/1/

這個問題只有鉻 - 疊加將不覆蓋整個屏幕。刪除邊界半徑或溢出CSS不會有這個問題。任何想法通過它？似乎是最新的瀏覽器的錯誤（之前沒有看到它）

<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

我遇到同樣的問題。我發現在對話框中添加一個比邊框半徑大的透明邊框可以修復它。

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

在你的情況下，它會取代你的黑色像素邊框，這也可能是不理想。