title: Page elements shaking due to CSS effect
body: <p>I added a ripple effect to happen when the user clicks anywhere on a div. It works well except that when the page is full screen, the element shake and go blurry for until the ripple disappears. </p>
  
  <p><strong>Here's the JS for the effect:</strong> </p>
  
  <pre><code>$("div").click(function(e) {
    // Remove any old ripples
    $(".ripple").remove();
  
    // Setup
    var posX = $(this).offset().left,
        posY = $(this).offset().top,
        buttonWidth = $(this).width(),
        buttonHeight = $(this).height();
  
    // Add the element
    $(this).prepend("&lt;span class='ripple'&gt;&lt;/span&gt;");
  
   // Make it round
    if(buttonWidth &gt;= buttonHeight) {
      buttonHeight = buttonWidth;
    } else {
      buttonWidth = buttonHeight; 
    }
  
    // Get the center of the element
    var x = e.pageX - posX - buttonWidth / 2;
    var y = e.pageY - posY - buttonHeight / 2;
  
  
    // Add the ripples CSS and start the animation
    $(".ripple").css({
      width: buttonWidth,
      height: buttonHeight,
      top: y + 'px',
      left: x + 'px'
    }).addClass("rippleEffect");
  });
  </code></pre>
  
  <p><strong>And the CSS:</strong> </p>
  
  <pre><code>.ripple {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(249, 107, 107, 0.8);
    transform: scale(0);
    position: absolute;
    opacity: 1;
    z-index: 100; 
  }
  .rippleEffect {
      animation: rippleDrop .4s linear;
  }
  
  @keyframes rippleDrop {
    100% {
      transform: scale(0.1);
      opacity: 0;
    }
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/f1apoya1/5/" rel="nofollow">Here's</a> the fiddle but you can't see the issue as it's a minimized preview, so <a href="http://test9489482.bitballoon.com/" rel="nofollow">here's</a> another link where you can see it. </p>
  
  <p>Thank you for any help!</p>