javascript - Javascript 动画在 Safari 14 中无法正常工作

Question

对于投资组合网站，我使用的是我在这里找到的代码片段，一种 DVD 动画。由于我在 Mac OS Big Sur 上安装了 Safari 14，因此动画无法正常工作。它似乎在它的运动中留下了一些痕迹。有人知道这个问题吗？我该如何解决？非常感谢。

这是 Chrome 上 的屏幕截图 这是 Safari 14 上的屏幕截图

这是我的动画js：

//Constants
const section = document.getElementById("anim_jtm");
const logo = document.getElementById("logo");
const body = document.getElementById("body");
section.style.height = body.clientHeight + "px";
section.style.width = body.clientWidth + "px";

// Logo moving velocity Variables
let xPosition = 10;
let yPosition = 10;
let xSpeed = 0.7;
let ySpeed = 0.7;

function update() {
  logo.style.left = xPosition + "px";
  logo.style.top = yPosition + "px";
}

setInterval(() => {
  if (xPosition + logo.clientWidth >= body.clientWidth || xPosition <= 0) {
    xSpeed = -xSpeed;
    logo.style.fill = randomColor();
  }
  if (yPosition + logo.clientHeight >= body.clientHeight || yPosition <= 0) {
    ySpeed = -ySpeed;
    logo.style.fill = randomColor();
  }

  xPosition += xSpeed;
  yPosition += ySpeed;
  update();
}, 1);

function randomColor() {
  let color = "#";
  color += Math.random().toString(16).slice(2, 8).toUpperCase();

  return color;
}

window.addEventListener("resize", () => {
  xPosition = 10;
  yPosition = 10;

  section.style.height = body.clientHeight + "px";
  section.style.width = body.clientWidth + "px";
});

标签： javascriptanimationsafari