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

【问题标题】：Safari : clip-path with disabled mouse events outside?Safari：外部禁用鼠标事件的剪辑路径？
【发布时间】：2021-05-21 16:47:51
【问题描述】：

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

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

是否有任何解决此问题的方法？

请观看这个 10 秒的简短视频，以更好地了解我想要实现的目标 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%)

【问题讨论】：

Ignore mouse interaction on overlay image的可能重复
同时添加 webkit ...您使用的是哪个浏览器？
@TemaniAfif 你是对的。它适用于 Chrome。所以，这应该是 Safari 特有的东西
caniuse.com/#search=clip-path 那就用webkit吧，safari有部分支持
@TemaniAfif -webkit- 前缀本身并不能解决 safari 问题，但感谢您指出方向。可能我会尝试使用 svg 参考 url(#circle-mask)

标签： css

【解决方案1】：

我有同样的包。我这样修。对于具有剪辑路径属性设置位置“绝对”的父容器，但仅限于它。对于所有孩子，您需要设置“相对”位置。即使对于深沉的孩子。如果您最后有一个位置为“绝对”的孩子，一切都会中断。

.parent {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     clip-path: circle(50% at 50% 50%)
    -webkit-clip-path: circle(50% at 50% 50%)
}
.child {
     position: relative;
     width: 100%;
     height: 100%;
}

【讨论】：