Why transition is not working in Safari browser? - html

Question

<style>
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.main-cube-wrapper {
height: 80px;
position: relative;
margin-top: 2rem;
}
.wrap {
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.cube {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 80px;
height: 80px;
margin: auto;
-webkit-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 30s;
animation-duration: 30s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.cube div {
position: absolute;
opacity: 0.7;
width: 80px;
height: 80px;
}
.face-1 {
background: red;
-webkit-transform: rotateY(0deg) translateZ(40px);
transform: rotateY(0deg) translateZ(40px);
}
.face-2 {
background: green;
-webkit-transform: rotateY(90deg) translateZ(40px);
transform: rotateY(90deg) translateZ(40px);
}
.face-3 {
background: blue;
-webkit-transform: rotateY(180deg) translateZ(40px);
transform: rotateY(180deg) translateZ(40px);
}
.face-4 {
background: yellow;
-webkit-transform: rotateY(-90deg) translateZ(40px);
transform: rotateY(-90deg) translateZ(40px);
}
.face-5 {
background: purple;
-webkit-transform: rotateX(90deg) translateZ(40px);
transform: rotateX(90deg) translateZ(40px);
}
.face-6 {
background: orange;
-webkit-transform: rotateX(-90deg) translateZ(40px);
transform: rotateX(-90deg) translateZ(40px);
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate3d(0, 0, 0, 0);
transform: rotate3d(0, 0, 0, 0);
}
100% {
-webkit-transform: rotate3d(0, 1, 0, 360deg);
transform: rotate3d(0, 1, 0, 360deg);
}
}
#keyframes rotate {
0% {
-webkit-transform: rotate3d(0, 0, 0, 0);
transform: rotate3d(0, 0, 0, 0);
}
100% {
-webkit-transform: rotate3d(0, 1, 0, 360deg);
transform: rotate3d(0, 1, 0, 360deg);
}
}
</style>
<div class="main-cube-wrapper">
<div class="wrap">
<div class="cube">
<div class="face-1"></div>
<div class="face-2"></div>
<div class="face-3"></div>
<div class="face-4"></div>
<div class="face-5"></div>
<div class="face-6"></div>
</div>
</div>
</div>
I am learning and working on some project I have created the rotating cube using SCSS, and I have already checked that the cube translates or rotates in every browser except 'Safari browser'. Can anybody please help me solving this issue so the cube can also rotate and work properly in the safari browser.

Answer 1

See update below
It look like Safari has issues with rotate3d. Just test this example on your Safari browser. The last rotation using rotateZ should work.
div {
width: 100px;
height: 100px;
background: red;
margin: 20px;
}
.rotate-2d { -webkit-animation: rotate-2d 1s linear infinite; }
.rotate-3d { -webkit-animation: rotate-3d 1s linear infinite; }
.rotate-3d-v2 { -webkit-animation: rotate-3d-v2 1s linear infinite; }
div:after {
content: 'A';
display: inline-block;
width: 10px;
height: 20px;
color: green;
font-size: 100px;
}
#-webkit-keyframes rotate-2d {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-webkit-keyframes rotate-3d {
0% {
-webkit-transform: rotate3d(0,0,1,0deg);
}
100% {
-webkit-transform: rotate3d(0,0,1,360deg);
}
}
#-webkit-keyframes rotate-3d-v2 {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg);
}
}
<div class="rotate-2d"></div>
<div class="rotate-3d"></div>
<div class="rotate-3d-v2"></div>
Update
Seems Safari has an issue to recognise the change between two key frames. Adding an intermediate keyframe seem to solve the problem:
.main-cube-wrapper {
height: 180px;
position: relative;
margin-top: 2rem;
}
.wrap {
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.cube {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 80px;
height: 80px;
margin: auto;
-webkit-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 30s;
animation-duration: 30s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.cube div {
position: absolute;
opacity: 0.7;
width: 80px;
height: 80px;
}
.face-1 {
background: red;
-webkit-transform: rotateY(0deg) translateZ(40px);
transform: rotateY(0deg) translateZ(40px);
}
.face-2 {
background: green;
-webkit-transform: rotateY(90deg) translateZ(40px);
transform: rotateY(90deg) translateZ(40px);
}
.face-3 {
background: blue;
-webkit-transform: rotateY(180deg) translateZ(40px);
transform: rotateY(180deg) translateZ(40px);
}
.face-4 {
background: yellow;
-webkit-transform: rotateY(-90deg) translateZ(40px);
transform: rotateY(-90deg) translateZ(40px);
}
.face-5 {
background: purple;
-webkit-transform: rotateX(90deg) translateZ(40px);
transform: rotateX(90deg) translateZ(40px);
}
.face-6 {
background: orange;
-webkit-transform: rotateX(-90deg) translateZ(40px);
transform: rotateX(-90deg) translateZ(40px);
}
#-webkit-keyframes rotate {
0% {
transform: rotate3d(0, 0, 0, 0);
}
50% {
transform: rotate3d(0, 1, 0, 180deg);
}
100% {
transform: rotate3d(0, 1, 0, 360deg);
}
}
<div class="main-cube-wrapper">
<div class="wrap">
<div class="cube">
<div class="face-1"></div>
<div class="face-2"></div>
<div class="face-3"></div>
<div class="face-4"></div>
<div class="face-5"></div>
<div class="face-6"></div>
</div>
</div>
</div>