CODEWITHSUNDEEP
css
Sergey Khmelevskoy
Sergey Khmelevskoy

Reputation: 2544

Safari : clip-path with disabled mouse events outside?

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

Upvotes: 4

Views: 928

Answers (1)

Михаил Клеченко
Михаил Клеченко

Reputation: 175

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

Upvotes: 2

Related Questions