Safari：外部禁用鼠标事件的剪辑路径？

Question

我正在寻找创建一个包含谷歌地图的圈子，隐藏的溢出无法拖动

我认为剪辑路径属性是我需要的，但它似乎仍然可以处理剪裁形状之外的地图。与border-radius: 50%和overflow: hidden

相同

有关此问题的解决方法吗？

请查看这个简短的10s视频，以便更好地了解我正在努力实现的目标 http://take.ms/mhvqA

我不是要完全禁用拖动。它应该只在圆圈内工作。因此pointer-events: none无济于事

现场演示：http://bergman.surge.sh/contacts.html

更新：这在Chrome，Firefox等方面效果很好。但Safari不支持

.contact-map
  position: absolute
  z-index: 9
  top: 0
  right: 0
  size: 910px
  transform: translate3d(8.5%,-45%,0)
  border-radius: 50%
  overflow: hidden
  pointer-events: none
  > div
    width: 100%
    height: 102%
    pointer-events: all
    clip-path: circle(50% at 50% 50%)
    -webkit-clip-path: circle(50% at 50% 50%)