Question

我们正在尝试构建汉堡包动画，但是左下角的蓝色方块在 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;
}

https://codepen.io/izumijh/pen/mdOxdMB?fbclid=IwAR2ZF0I_DuTOJhfBBhrfyY8WDDBK_RMle5KxmuGHy93EMMhuDOTCf0zk0_s

以下动画的密码：1234

Chrome 上的汉堡包：https://sendeyo.com/en/db793b8443
Safari 上的汉堡包：https://sendeyo.com/en/a3585e05d9

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

0 个答案: