覆蓋與圈缺口不會在Safari

Question

顯示

所以我有這樣的代碼：

.background-image { 
 
     height: 700px; 
 
     width: 100%; 
 
     background: red; 
 
    } 
 
    
 
    .top { 
 
     margin-top: -85px; 
 
     position: relative; 
 
     height: 700px; 
 
    } 
 
    .top .circle { 
 
     width: 100%; 
 
     height: 700px; 
 
     overflow: hidden; 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     margin: 0 auto; 
 
     z-index: 1; 
 
    } 
 
    .top .circle:before { 
 
     content: ''; 
 
     position: absolute; 
 
     width: 200px; 
 
     height: 200px; 
 
     top: 50%; 
 
     left: 50%; 
 
     margin-top: -100px; 
 
     margin-left: -100px; 
 
     border-radius: 50%; 
 
     box-shadow: 0px 0px 0px 9999px rgba(43, 54, 69, 0.75); 
 
     z-index: -1; 
 
     }

<div class="top"> 
 
    <div class="background-image"></div> 
 
    <div class="circle"></div> 
 
</div>

結果是覆蓋在紅色的背景，與圈中間的那個切出。您可以在此處看到結果：https://jsfiddle.net/erLqg448/

該代碼在Firefox和Chrome中很好用，但在Safari中，整個疊加層似乎缺失。有任何想法嗎？

Answer 1

顯然safari有這麼大的擴展半徑值的問題。但是如果你使用一個較小的值，比如99em，它應該覆蓋你的視口並且仍然可以正確渲染。看看上面的代碼和updated jsFiddle

.background-image { 
 
     height: 700px; 
 
     width: 100%; 
 
     background: red; 
 
    } 
 
    
 
    .top { 
 
     margin-top: -85px; 
 
     position: relative; 
 
     height: 700px; 
 
    } 
 
    .top .circle { 
 
     width: 100%; 
 
     height: 700px; 
 
     overflow: hidden; 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     margin: 0 auto; 
 
     z-index: 1; 
 
    } 
 
    .top .circle:before { 
 
     content: ''; 
 
     position: absolute; 
 
     width: 200px; 
 
     height: 200px; 
 
     top: 50%; 
 
     left: 50%; 
 
     margin-top: -100px; 
 
     margin-left: -100px; 
 
     border-radius: 50%; 
 
     box-shadow: 0px 0px 0px 99em rgba(43, 54, 69, 0.75); 
 
     z-index: -1; 
 
     }

<div class="top"> 
 
    <div class="background-image"></div> 
 
    <div class="circle"></div> 
 
</div>