覆盖与圈缺口不会在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>