带有圆形切口的叠加层在Safari中无法显示

Question

所以我有这段代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

结果覆盖在红色背景上，中间有圆圈。您可以在此处查看结果：https://jsfiddle.net/erLqg448/

该代码在Firefox和Chrome中运行良好，但在Safari中，整个叠加似乎都缺失了。有任何想法吗？

Answer 1

显然，safari存在如此大的扩散半径值的问题。但是如果你使用较小的值，比如99em，它应该覆盖你的视口并仍然正确渲染。请查看上面的代码段和updated jsFiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;