在FireFox，IE，Edge中使用鼠标滚轮滚动时，手动修复内容会跳转

Question

我试图在滚动期间粘贴一些SVG元素位置。但是当在FireFox，IE，Edge中使用鼠标滚轮滚动时，这些元素会跳跃。 Chrome看起来很好。以下是样本：

var container = document.getElementById('container');
var rect = document.getElementById('rect');
container.addEventListener('scroll', function() {
  rect.setAttribute(
    'transform',
    'translate(0,' + container.scrollTop + ')'
  );
});

#container {
  height: 200px;
  overflow: scroll;
}
svg {
  display: block;
  height: 500px;
}

<div id="container">
  <svg>
    <rect id="rect" x="0" y="50" width="100" height="50" fill="red" />
  </svg>
</div>

首先看起来滚动的内容会被渲染，然后才会渲染我的定位。