title: Clipping path point animation on scroll not working in Safari
body: <p>I am currently working on a project where the background of the site has 3 masked images, and when the user scrolls, the points of these images move with the scroll. I can get it working well in Chrome, but just can't get it to play nice with any other browser. Due to time constraints, I am currently only required to get this working in Safari and Chrome (other browsers get served a static image).</p>
  
  <p><a href="https://codepen.io/wickywills/pen/GQzaXE" rel="nofollow noreferrer">Codepen</a></p>
  
  <p>If you scroll in Chrome, you should see the desired effect. I have read elsewhere about how Safari has many issues with SVG's and that I should use an Object tag instead, however I am unsure how I can apply the Object tag given that I need the points inline so that I can change them via JS, or am I missing something?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="site-wrap" class="c-site c-images"&gt;
    &lt;img id="nodes-bg-3i-1" width="100%" src="http://via.placeholder.com/1500x2800"&gt;
    &lt;img id="nodes-bg-3i-2" width="100%" src="http://via.placeholder.com/1500x2800"&gt;
    &lt;img id="nodes-bg-3i-3" width="100%" src="http://via.placeholder.com/1500x2800"&gt;
    &lt;svg id="nodes-mask-desk" width="0" height="0"&gt;
      &lt;defs&gt;
        &lt;clipPath id="clipPolygon" clipPathUnits="objectBoundingBox"&gt;
          &lt;polygon id="poly1" points="0.35 0.23,1 0.28,1 0,0.6 0"&gt;
          &lt;/polygon&gt;
        &lt;/clipPath&gt;
        &lt;clipPath id="clipPolygon2" clipPathUnits="objectBoundingBox"&gt;
          &lt;polygon id="poly2" points="0.0 0.26,0.35 0.23,0.6 0.62,0.0 0.62"&gt;
          &lt;/polygon&gt;
        &lt;/clipPath&gt;
        &lt;clipPath id="clipPolygon3" clipPathUnits="objectBoundingBox"&gt;
          &lt;polygon id="poly3" points="0.3 1,1 1,1 0.62,0.6 0.62"&gt;
          &lt;/polygon&gt;
        &lt;/clipPath&gt;
      &lt;/defs&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS (SCSS)</strong></p>
  
  <pre><code>#nodes-bg-3i-1 { -webkit-clip-path: url(#clipPolygon); clip-path: url(#clipPolygon); }
  #nodes-bg-3i-2 { -webkit-clip-path: url(#clipPolygon2); clip-path: url(#clipPolygon2); }
  #nodes-bg-3i-3 { -webkit-clip-path: url(#clipPolygon3); clip-path: url(#clipPolygon3); }
  
  #mob-img-1 { -webkit-clip-path: url(#clipMob1); clip-path: url(#clipMob1); }
  #mob-img-2 { -webkit-clip-path: url(#clipMob2); clip-path: url(#clipMob2); }
  #mob-img-3 { -webkit-clip-path: url(#clipMob3); clip-path: url(#clipMob3); }
  
  img {
    display: block;
    width: 100%;
  
    &amp;:nth-child(2),
    &amp;:nth-child(3){
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var animPoints = {
  
    init: function() {
      var isScrolling;
      var scrollingDone = false;
  
      animPoints.pointParallaxBackgrounds();
  
      // Init backgrounds on scroll, but wait for a period of time after scroll starts before init
      window.addEventListener('scroll', function ( event ) {
        animPoints.pointParallaxBackgrounds();
      }, false);
    },
  
    pointParallaxBackgrounds: function(){
      var el = document.getElementById('site-wrap');
      var scrollPos = window.pageYOffset;
  
      var poly1 = document.getElementById("poly1"); // Points element within SVG
      var poly1Points = poly1.getAttribute("points"); // Points attribute containing position values
      var poly1PointsArr = poly1Points.split(","); // We only need the fourth point's coordinates
      var poly1PointPair1Arr = poly1PointsArr[3].split(" "); // We only need the first point's coordinates
  
      var poly2 = document.getElementById("poly2"); // Points element within SVG
      var poly2Points = poly2.getAttribute("points"); // Points attribute containing position values
      var poly2PointsArr = poly2Points.split(","); // We only need the second point's coordinates
      var poly2PointPair2Arr = poly2PointsArr[1].split(" "); // We only need the first point's coordinates
      var poly2PointPair3Arr = poly2PointsArr[2].split(" "); // We only need the first point's coordinates
  
  
      var poly3 = document.getElementById("poly3"); // Points element within SVG
      var poly3Points = poly3.getAttribute("points"); // Points attribute containing position values
      var poly3PointsArr = poly3Points.split(","); // We only need the fourth point's coordinates
      var poly3PointPair4Arr = poly3PointsArr[3].split(" "); // We only need the fourth point's coordinates
  
      // Update polygon 2 Y axis
      poly2PointPair2Arr[1] = (0.2 + (scrollPos * .4)  / el.offsetHeight);
      poly1PointPair1Arr[1] = poly2PointPair2Arr[1];
      poly1PointPair1Arr[0] = poly2PointPair2Arr[0];
      poly2PointPair3Arr[1] = (0.4 + (scrollPos * .4)  / el.offsetHeight);
      poly3PointPair4Arr[1] = poly2PointPair3Arr[1];
  
  
      // Set some boundss
      if(poly2PointPair2Arr[1] &lt;= 0.23){
        poly2PointPair2Arr[1] = 0.23;
        poly1PointPair1Arr[1] = 0.23;
      }
  
  
      if(poly2PointPair3Arr[1] &lt;= 0.61){
        poly2PointPair3Arr[1] = 0.61;
        poly3PointPair4Arr[1] = 0.61;
      }
  
      // Convert modified array of points back to string, and update var
      poly1PointsArr[0] = poly1PointPair1Arr.join(" ");
      poly2PointsArr[1] = poly2PointPair2Arr.join(" ");
      poly2PointsArr[2] = poly2PointPair3Arr.join(" ");
      poly3PointsArr[3] = poly3PointPair4Arr.join(" ");
  
  
      poly1.setAttribute('points', poly1PointsArr);
      poly2.setAttribute('points', poly2PointsArr);
      poly3.setAttribute('points', poly3PointsArr);
    }
  };
  
  var chrome   = navigator.userAgent.indexOf('Chrome') &gt; -1;
  var explorer = navigator.userAgent.indexOf('MSIE') &gt; -1;
  var firefox  = navigator.userAgent.indexOf('Firefox') &gt; -1;
  var safari   = navigator.userAgent.indexOf("Safari") &gt; -1;
  
  if(chrome || safari) {
    console.log("test");
    animPoints.init();
  }
  </code></pre>