title: When sizing up a circle(with postition relative) using js, scroll bars appear
body: <p>I have this color theme change animations that are basically a circle that gets bigger fast with a color depending on which button you press.</p>
  <p>My Problem is, that at the end of the animation the circle get's so wide and high, that the page size increases even though the circle position is set to absolute. I would like the page to stay the same size without beeing affected by the size of the circle.</p>
  <p>Also if anyone has possible improvements to share let me know!</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>function ultraDarkMode(){
    grow(0,0,0);
  }
  
  function whiteMode(){
    grow(255,255,255);
  }
  
  function darkMode(){
    grow(68,58,58);
  }
  
  function grow(r,g,b){
    let circle = document.getElementById("circle");
    let body = document.body;
    circle.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
    circle.style.boxShadow = "0px 0px 50px 100px rgb(" + r + "," + g + "," + b + ")";
    let i = 1;
    let interval = setInterval(()=&gt;{
      circle.style.height = circle.clientHeight + 100 + "px";
      circle.style.width = circle.clientWidth + 100 + "px";
      if(i == 30) {
        circle.style.height = 150 + "px";
        circle.style.width = 150 + "px";
        body.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
        clearInterval(interval);
      }
      i++;
    }, 15)
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#circle{
    width: 200px;
    height: 200px;
    background-color: darkgray;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: -200px;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 50px 100px darkgray;
    z-index: -1;
  /*  offset x offset y blur radius spread radius und color  */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button type="button" onclick=darkMode()&gt;Darkmode&lt;/button&gt;
  &lt;button type="button" onclick=whiteMode()&gt;WhiteMode&lt;/button&gt;
  &lt;button type="button" onclick=ultraDarkMode()&gt;UltraDarkMode&lt;/button&gt;
  &lt;div id="circle"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>