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;
}
Password for animations below: 1234
Hamburger on Chrome: https://sendeyo.com/en/db793b8443
Hamburger on Safari: https://sendeyo.com/en/a3585e05d9
