Javascript 页面元素由于CSS效果而抖动

我添加了一个涟漪效应，当用户点击div上的任何地方时，它都会发生。除了当页面全屏显示时，元素会抖动并变得模糊，直到涟漪消失

以下是效果的JS:

$("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("<span class='ripple'></span>");

 // Make it round
  if(buttonWidth >= 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");
});

.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;
  }
}

小提琴，但你看不到的问题，因为它是一个最小化的预览，所以另一个链接，你可以看到它

---

谢谢你的帮助

这个类的问题是：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

取消它，您将不会有闪烁。 我猜问题出在transform属性上。在DOM中插入和删除项，它必须重新计算位置

当我清除类中的所有样式时-闪烁消失： 更改您的代码 第一:

你是X，计算机是O。
好啊
不

二,

你是X，计算机是O。
好啊
不

你也可以把它添加到你的CSS中，我只是把它粘贴到你的CSS中，你可以看到这些变化

注意-您需要更改YQ代码，我可以覆盖圆圈

---

图片：

对我来说工作正常：Chrome531080p屏幕。甚至试过F11。@yuriy636真奇怪。。。也许这只是我的电脑或屏幕大小（1366x768）。通过ubuntu ff和chrome测试：一切正常。试试这个ripple实现：你还用它摇晃吗？我明白你在说什么了。我不认为这只是你的问题，可能很难注意到，或者可能不会发生在所有版本的浏览器上

<div style="visibility: visible; position: fixed;" id="choose" class="centered">
            <div style="position: fixed; transform: translate(-50%, -50%); width: 100%; left: 50%; top: 50%;" id="choose-cont">
            <h3>You are X, the computer is O.</h3>
            <button id="okay">OK</button>
            <button id="surprise">No</button>
            </div>
   </div>

<div style="position: fixed; transform: translate(-50%, -50%); width:   100%; left: 50%; top: 50%;" id="choose-cont">
            <h3>You are X, the computer is O.</h3>
            <button id="okay">OK</button>
            <button id="surprise">No</button>
            </div>