Overlay mit Kreisausschnitt zeigt nicht in Safari

Question

so habe ich diesen Code:

.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>

Das Ergebnis ist Overlay über den roten Hintergrund, mit Kreis in der Mitte, dass ausgeschnitten . Sie können die Ergebnisse hier sehen: https://jsfiddle.net/erLqg448/

Dieser Code funktioniert gut in Firefox und Chrome, aber in Safari scheint das ganze Overlay zu fehlen. Irgendwelche Ideen?

Answer 1

Anscheinend hat Safari ein Problem mit solch einem großen Wert von Spreizeradius. Aber wenn Sie einen kleineren Wert wie 99em verwenden, sollte es Ihr Ansichtsfenster abdecken und trotzdem richtig rendern. Werfen Sie einen Blick auf über Schnipsel und 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>