Tengo 2 divs. Estoy tratando de hacer un agujero redondo en el div superior semitransparente para ver a través del div inferior.

Este código funciona bien, pero no en safari. Parece que el radio del borde rompe esto. ¿Hay alguna solución para el 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>