title: How to prevent pointer-event outside of iframe with svg clip-path? (Safari browser)
body: <p>I have made a parallax effect on iframe, which is <code>position: fixed</code>. The iframe is inside a container which has clipped with SVG <code>&lt;clipPath/&gt;</code>.
  It works on Chrome, Firefox and Safari browser. But in Safari it works partially. Visiblity works but not the events. the events are still available out side cliped box. So if I click outside iframe it fired iframe click event. </p>
  
  <blockquote>
    <p>N.B: Because of this approach I want to inject fullscreen ads/video iframes inside page/blog. Where I haven't access to change the page layouts or styling.</p>
  </blockquote>
  
  <p>Here is my snippet.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("outBtn").addEventListener("click", function() {
    alert('clicked outside iframe')
  });
  
  (function() {
    var splitBoard = document.querySelector('.splitboard');
    if (!splitBoard) return;
    setTimeout(function() {
      var iframeElm = splitBoard.querySelector('iframe');
      if (iframeElm) {
        var isSafari = navigator.userAgent.indexOf('safari') &gt; -1 &amp;&amp; navigator.userAgent.indexOf('chrome') == -1;
        if (isSafari) {
          function onMouseMove(event) {
            var viewportOffset = splitBoard.getBoundingClientRect();
            if (!(event.clientY &gt; viewportOffset.top + 15 &amp;&amp; event.clientY &lt; viewportOffset.bottom - 15)) {
              onMouseleave();
            }
          }
  
          function onMouseenter(event) {
            splitBoard.classList.add('active');
            iframeElm.style.pointerEvents = null;
            splitBoard.addEventListener('mousemove', onMouseMove, false);
          }
          splitBoard.addEventListener('mouseover', onMouseenter);
  
          function onMouseleave(event) {
            splitBoard.classList.remove('active');
            iframeElm.style.pointerEvents = 'none';
            splitBoard.removeEventListener('mousemove', onMouseMove);
          }
          splitBoard.addEventListener('mouseleave', onMouseleave);
        }
      }
    }, 2000);
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    width: 500px;
    margin: 0 auto;
  }
  
  #outBtn {
    margin: 10px auto;
    display: block;
  }
  
  .splitboard {
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(((100% - 100vw) / 2) - 8px);
    -webkit-clip-path: url(#clipSplitBox);
    clip-path: url(#clipSplitBox);
  }
  
  .splitboard-content {
    position: relative;
    width: 100%;
    height: 100vh;
  }
  
  .splitboard-content iframe {
    position: fixed;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border: none;
  }
  
  .splitboard-content iframe {
    pointer-events: none;
  }
  
  .splitboard-content.active iframe,
  .splitboard-content:hover iframe {
    pointer-events: all;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;h3&gt;Scroll the page&lt;/h3&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dicta, sit sunt, consectetur beatae, eligendi quaerat cum ipsa laborum officia consequuntur facere ullam veritatis fugiat ipsam doloremque perspiciatis sapiente rem?&lt;/p&gt;
    &lt;p&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta voluptatem a, ipsa beatae perferendis accusantium labore dolorum distinctio aut dolor, suscipit vel culpa mollitia ratione atque iure hic illo esse.&lt;/p&gt;
  
    &lt;div class="splitboard"&gt;
      &lt;div class="splitboard-content"&gt;
        &lt;iframe style="background:black" border="0" scrolling="no" srcdoc='&lt;a href="javascript:alert(`clicked inside iframe`)"&gt;&lt;img src="http://themesity.com/wp-content/uploads/templates/dexter/img/background/bg1.jpg" width="100%"&gt;&lt;h2 style="color:#fff; position:absolute; top:50%; left:50%; padding:10px; background:rgba(0,0,0,0.5); margin: -20px 0 0 -105px"&gt;Click on the image&lt;/h2&gt;&lt;/a&gt;'&gt;&lt;/iframe&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;svg class="clip-svg" height="0" width="0"&gt;
      &lt;defs&gt;
        &lt;clipPath id="clipSplitBox" clipPathUnits="objectBoundingBox"&gt;
          &lt;polygon points="0 0.99, 0 0.01, 1 0.01, 1 0.99"&gt;&lt;/polygon&gt;
        &lt;/clipPath&gt;
      &lt;/defs&gt;
    &lt;/svg&gt;
  
    &lt;button id="outBtn"&gt;CLICK HERE&lt;/button&gt;
    &lt;p&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita suscipit rem modi eveniet ullam quis neque culpa vel, id a asperiores velit quam? Aut deleniti enim ab corporis nam modi!&lt;/p&gt;
    &lt;p&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum ipsam excepturi, porro blanditiis libero, expedita iste voluptatibus commodi consequatur deserunt enim quas autem nesciunt recusandae sapiente totam neque mollitia quia.&lt;/p&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Click here to see the full Page result <a href="https://codepen.io/miraz235/full/ZaQMgL" rel="nofollow noreferrer">in CodePan</a></p>
  
  <p><strong>edit JS solution</strong>
  I have come to with Javascript solution. Hope anybody can give me any other non JS solutions.
  Here is my code.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.splitboard-content iframe {
      pointer-events: none;
  }
  
  .splitboard-content.active iframe,
  .splitboard-content:hover iframe {
      pointer-events: all;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>(function(){
      var splitBoard = document.querySelector('.splitboard');
      if(!splitBoard) return;
      setTimeout(function() {
          var iframeElm = splitBoard.querySelector('iframe');
          if (iframeElm) {
              var isSafari = navigator.userAgent.indexOf('safari') &gt; -1 &amp;&amp; navigator.userAgent.indexOf('chrome') == -1;
              if (isSafari) {
                  function onMouseMove(event) {
                      var viewportOffset = splitBoard.getBoundingClientRect();
                      if (!(event.clientY &gt; viewportOffset.top + 15 &amp;&amp; event.clientY &lt; viewportOffset.bottom - 15)) {
                          onMouseleave();
                      }
                  }
  
                  function onMouseenter(event) {
                      splitBoard.classList.add('active');
                      iframeElm.style.pointerEvents = null;
                      splitBoard.addEventListener('mousemove', onMouseMove, false);
                  }
                  splitBoard.addEventListener('mouseover', onMouseenter);
  
                  function onMouseleave(event) {
                      splitBoard.classList.remove('active');
                      iframeElm.style.pointerEvents = 'none';
                      splitBoard.removeEventListener('mousemove', onMouseMove);
                  }
                  splitBoard.addEventListener('mouseleave', onMouseleave);
              }
          }
      }, 2000);
  })();
  </code></pre>