title: Before / after image slider not responsive
body: <p>I have an image slider (on hover) that doesn't want to work when opened as a local html file. In jsfiddle it works ok: <a href="https://jsfiddle.net/o1vc8ynd/" rel="nofollow noreferrer">https://jsfiddle.net/o1vc8ynd/</a></p>
  <p>Am I referencing some components incorrectly or is there something else wrong? In the error log I can see Uncaught TypeError: Cannot read properties of null (reading 'clientWidth') and Uncaught TypeError: Cannot read properties of null (reading 'style').</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;Career Site Upgrade&lt;/title&gt;
      &lt;style&gt;
  div#comparison {
    width: 60vw;
    height: 60vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
  }
  
  div#comparison figure {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg);
    background-size: cover;
    position: relative;
    font-size: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  
  div#comparison figure&gt;img {
    position: relative;
    width: 100%;
  }
  
  div#comparison figure div {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg);
    background-size: cover;
    position: absolute;
    width: 50%;
    box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    bottom: 0;
    height: 100%;
  }
      &lt;/style&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
      var divisor = document.getElementById(&quot;divisor&quot;);
  var comparisonWidth = document.getElementById(&quot;comparison&quot;).clientWidth;
  
  function moveDivisor(e) {
    divisor.style.width = (e.offsetX * 100 / comparisonWidth) + &quot;%&quot;;
  }
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id=&quot;comparison&quot; onmousemove=&quot;moveDivisor(event)&quot;&gt;
    &lt;figure&gt;
      &lt;div id=&quot;divisor&quot;&gt;&lt;/div&gt;
    &lt;/figure&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>