Why is the Hamburger animation different on Safari and Chrome?

We are trying to build the hamburger animation however the blue square on the bottom left is distorted on Safari (the blue square skips downwards on Safari) but works without a hitch on Chrome. Can someone tell us how should we tune the CSS? We have been debugging this for a week.

Code is on the link below:

#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

Password for animations below: 1234

Hamburger on Chrome: https://sendeyo.com/en/db793b8443
Hamburger on Safari: https://sendeyo.com/en/a3585e05d9