Safari上的CodePen Moon Glitch

Question

我正在使用这个月相惊人的CodePen：https://codepen.io/xaelan/full/arLJEL。

但是在Safari桌面和移动浏览器中，包含灯光的div渲染的尺寸大于月球图像。在Safari中检查CodePen来查看问题。

我不知道是什么导致了此错误。有什么想法吗？

我认为这与该div的CSS有关：

.light {
  box-sizing: border-box;
  width: 20rem;
  height: 20rem;
  background-color: $shadow;
  border-radius: 50%;
  animation: cycle 80s linear infinite reverse;
  animation-delay: -10s;
  filter: blur(0.5rem);
}

更新：我发现，如果我在关键帧动画中注释掉了transform属性，尽管我们确实失去了旋转，但视觉上的毛刺消失了。

这是动画：

@keyframes cycle {

  0% {
    border-left: 5rem solid $sunlight;
    border-right: 10rem solid $shadow;
    background-color: $shadow;
    // transform: rotate(-10deg);
  }

  24.9999% {
    background-color: $shadow;
  }

  25% {
    border-left: 10rem solid $sunlight;
    border-right: 10rem solid $shadow;
    background-color: $sunlight;
  }

  50% {
    border-left: 0 solid $sunlight;
    border-right: 0 solid $shadow;
    background-color: $sunlight;
    // transform: rotate(0deg);

  }

  50.0001% {
    border-left: 0 solid $shadow;
  }

  74.9999% {
    background-color: $sunlight;
    border-right: 0 solid $sunlight;
  }

  75% {
    border-left: 10rem solid $shadow;
    border-right: 10rem solid $sunlight;
    background-color: $shadow;
  }

  100% {
    border-left: 10rem solid $shadow;
    border-right: 0 solid $sunlight;
    background-color: $shadow;
    // transform: rotate(10deg);

  }
}