Currently, I am working on implementing a CSS3 3D transform for an opening cube. The functionality works seamlessly in Chrome, Firefox, and Opera browsers. However, there seems to be a strange issue in Safari where the cube is positioning itself oddly.
let isExpanded = false;
let cube = document.querySelector(".cube");
document.querySelector("#toggle").onclick = function(e) {
e.preventDefault();
document.querySelector("#toggle").disabled = true;
toggle();
}
function toggle() {
if (!isExpanded) {
isExpanded = true;
// Pause Rotation
document.querySelector(".cube").classList.add("pause");
// Open Cube
open();
} else {
isExpanded = false;
close();
}
}
function close() {
// Close the cube
cube.classList.remove("open");
cube.style.bottom = "0";
// Rotate to the start position and restart animation
setTimeout(function() {
cube.classList.remove("origin-bottom");
}, 1000); // >= side transform's transition time
setTimeout(function() {
cube.style.animation = "spin 15s infinite linear";
cube.style.webkitAnimation = "spin 15s infinite linear";
document.querySelector("#toggle").disabled = false;
}, 1200);
}
function open() {
// Set transform value to current position & Disable Animation
prop = window.getComputedStyle(cube, null).getPropertyValue("transform");
cube.style.transform = prop;
cube.style.webkitTransform = prop;
cube.style.MozTransform = prop;
cube.style.msTransform = prop;
cube.style.OTransform = prop;
cube.style.animation = "none";
cube.style.webkitAnimation = "none";
// Rotate the cube to its initial position & Remove pause
setTimeout(function() {
cube.classList.remove("pause");
cube.classList.add("origin-bottom");
cube.style.transform = "rotateX(-20deg) rotateY(42deg)";
cube.style.webkitTransform = "rotateX(-20deg) rotateY(42deg)";
cube.style.MozTransform = "rotateX(-20deg) rotateY(42deg)";
cube.style.msTransform = "rotateX(-20deg) rotateY(42deg)";
cube.style.OTransform = "rotateX(-20deg) rotateY(42deg)";
}, 50);
// Open the cube
setTimeout(function() {
cube.classList.add("open");
document.querySelector("#toggle").disabled = false;
}, 1000); // >= side transform's transition time
}body {background: #333;}
.cube-wrapper {
margin: auto;
width: 200px;
height: 200px;
top: 0;
bottom: 0;
right: 0;
left: 0;
position: absolute;
-webkit-perspective: 600px;
perspective: 600px;
perspective-origin: 50% 50%;
}
... [CSS code continued]
<button id="toggle">toggle</button>
<div class="preserve3d">
... [HTML structure continued]
</div>Despite the unusual displacement in Safari, the inspector indicates that the cube is correctly positioned. When utilizing getComputedStyle, the correct values are retrieved, which makes debugging this issue quite perplexing.
After researching, it was discovered that Safari has some complications with rotateY. Attempting the suggested solution of assigning z-index values did not resolve the problem.
For your convenience, here is a concise version of the code: https://jsfiddle.net/7mxghcq9/
Thank you in advance :)