Safari color and border radius

问题:

I have 2 divs. I am trying to make a round hole in top semi transparent div to see through to bottom div.

This code works well, but not in safari. It seems that border radius breaks this. Is there a solution for safari?

.bg {
   position: absolute;
width: 100%;
height: 100%;
background: url("https://www.nature.com/polopoly_fs/7.44180.1495028629!/image/WEB_GettyImages-494098244.jpg_gen/derivatives/landscape_630/WEB_GettyImages-494098244.jpg") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.cover {
  position: absolute;
  top: 50px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: 160px;
  height: 160px;
  box-shadow: 0 0 0 99999px;
  color: rgba(30, 30, 30, .8);
  border-radius: 100%;
}

<div class="bg"></div>
<div class="cover"></div>

回答1:

Looks like Safari cannot handle big box-shadow spread values with border-radius together.
So you might decrease the spread if acceptable.

Otherwise you can use border itself as I did in the snippet below:

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://www.nature.com/polopoly_fs/7.44180.1495028629!/image/WEB_GettyImages-494098244.jpg_gen/derivatives/landscape_630/WEB_GettyImages-494098244.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.cover {
  position: absolute;
  top: -99949px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate3d(-50%, 0, 0);
  width: 160px;
  height: 160px;
  color: rgba(30, 30, 30, .8);
  border-radius: 100%;
  border: solid 99999px;
}

<div class="bg"></div>
<div class="cover"></div>