Safari : clip-path with disabled mouse events outside?

Question

I'm looking to create a circle which contains google maps with hidden overflow impossible to drag

I thought that clip-path property is what I need, but it appear to be that it you can still handle the map outside clipped shape. Same as border-radius: 50% and overflow: hidden

Are there any workaround about this problem?

Please check this short 10s video for better understanding of what I'm trying to achieve http://take.ms/mhvqA

I'm not trying to disable drag completely. It should work only inside the circle. therefore pointer-events: none will not help

Live demo: http://bergman.surge.sh/contacts.html

Update: this works well in Chrome, Firefox, etc. But Safari does not

.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%)

Possible duplicate of [Ignore mouse interaction on overlay image](https://stackoverflow.com/questions/1657319/ignore-mouse-interaction-on-overlay-image) — mdewitt, Feb 21 '18 at 22:03
@TemaniAfif You are right. It works in Chrome. So, this should be something specific to Safari then — Sergey Khmelevskoy, Feb 21 '18 at 22:14
https://caniuse.com/#search=clip-path use webkit then, safari has a partial support — Temani Afif, Feb 21 '18 at 22:17
@TemaniAfif -webkit- prefix alone doesn't fix safari issue, but thanks for pointing the direction. Probably I will try with svg reference url(#circle-mask) — Sergey Khmelevskoy, Feb 21 '18 at 22:26

score 2 · Answer 1 · answered May 21 '21 at 08:47

I had the same bag. I fix it so. For parent container with clip-path property set position 'absolute', but only for it. For all children you need to set postion 'relative'. Even for deep children. If you have at last one child with position 'absolute' everything will break.

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

Safari : clip-path with disabled mouse events outside?

1 Answers1