Css 为什么Safari和Chrome上的汉堡包动画不同？

我们正在尝试构建汉堡包动画，但是左下角的蓝色方块在Safari上被扭曲（蓝色方块在Safari上向下跳过），但是在Chrome上工作没有任何问题。有人能告诉我们如何调整CSS吗？我们已经调试了一周了

代码位于以下链接中：

#hamburger {
  cursor: pointer;
}

#squares > * {
  -moz-transition: 0.3s linear; /* Firefox 4 */
  -webkit-transition: 0.3s linear; /* Safari and Chrome */
  -o-transition: 0.3s linear; /* Opera */
  -ms-transition: 0.3s linear; /* Explorer 10 */
  transition: 0.3s;
}

/* All Squares */
#squares {
  transform: translate(0px, -11%) rotate(0deg) scale(1);
}

/* Upper Left Square */
#squares rect:nth-child(1) {
  opacity: 1;
  transform: scaleX(1) scaleY(1) translate(0, 14.5%);
  fill: #f2668b;
}

/* Upper Right Square */
#squares rect:nth-child(2) {
  opacity: 1;
  transform: translate(52%, 14.5%);
  fill: #ffe9a2;
}

/* Lower Right Square */
#squares rect:nth-child(3) {
  opacity: 1;
  transform: scaleX(1) scaleY(1) translate(0, 68%);
  fill: #abe6ef;
}

/* Lower Left Square */
#squares rect:nth-child(4) {
  transform: translate(52%, 68%);
  fill: #d1c0b1;
  opacity: 1;
}

/* When the hamburger is activated, these classes are used */
/* All Squares */
#squares.activated {
  transform: translate(25px, -16px) rotate(45deg) scale(1);
}

/* Upper Left Square */
#squares.activated rect:nth-child(1) {
  opacity: 1;
  transform: scaleX(2.1) scaleY(0.3) translate(1px, 90px);
  fill: #f2668b;
}

/* Upper Right Square */
#squares.activated rect:nth-child(2) {
  opacity: 0;
  fill: #ffe9a2;
}

/* Lower Right Square */
#squares.activated rect:nth-child(3) {
  opacity: 1;
  transform: scaleX(0.3) scaleY(2.1) translate(46px, 7px);
  fill: #f2668b;
}

/* Lower Left Square */
#squares.activated rect:nth-child(4) {
  opacity: 0;
  fill: #abe6ef;
}

下面动画的密码：1234

镀铬汉堡包：

---

Safari上的汉堡包：

Safari 12.1.2（OS Sierra 10.12.6）上的动画与Chrome 89.0.4389.114中的动画相同。此处相同。Safari 14.0.3看起来与Chrome相同。然而，在我看来，这部动画片有点古怪：是的，我意识到这部动画片在Safari上有点神经质。有什么我们没有设置正确的吗？