title: Safari : clip-path with disabled mouse events outside?
body: <p>I'm looking to create a circle which contains google maps with hidden overflow impossible to drag</p>
  
  <p>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 <code>border-radius: 50%</code> and <code>overflow: hidden</code></p>
  
  <p>Are there any workaround about this problem? </p>
  
  <p>Please check this short 10s video for better understanding of what I'm trying to achieve
  <a href="http://take.ms/mhvqA" rel="nofollow noreferrer">http://take.ms/mhvqA</a></p>
  
  <p>I'm not trying to disable drag completely. It should work only inside the circle. therefore <code>pointer-events: none</code> will not help</p>
  
  <p>Live demo: <a href="http://bergman.surge.sh/contacts.html" rel="nofollow noreferrer">http://bergman.surge.sh/contacts.html</a></p>
  
  <p><strong>Update:</strong> this works well in Chrome, Firefox, etc. But Safari does not </p>
  
  <pre><code>.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
    &gt; div
      width: 100%
      height: 102%
      pointer-events: all
      clip-path: circle(50% at 50% 50%)
      -webkit-clip-path: circle(50% at 50% 50%)
  </code></pre>