带有圆形剪切的叠加不会显示在 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具有如此巨大的扩张-dradius的问题。但是，如果您使用较小的价值，例如99EM，则应覆盖您的视口并仍然正确渲染。查看上面的摘要并更新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>