Safari 11.0.1：3d转换错误

时间：2017-11-22 23:07:13

标签： javascript html css css3 safari

我正在开发一个使用CSS3 3d转换的开放式多维数据集，它在Chrome，Firefox和Opera中运行良好。 然而，在Safari中，由于某种原因，立方体正在移动到一个奇怪的地方。

＆＃13;
＆＃13; 
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
}
＆＃13; 
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%;
}
.cube-wrapper .cube {
  width: 200px;
  height: 200px;
  position: relative;
  bottom: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transition: all 1s ease-in-out;
  animation: spin 15s infinite linear;
}
.cube-wrapper .cube .side {
  transition: transform 1s ease-in-out, background 0.5s ease-in-out, opacity 0.5s ease-in-out;
  outline: 1px solid rgba(250, 250, 250, 0.3);
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
}
.cube-wrapper .cube .right {
  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .left {
  transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .top {
  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .bottom {
  transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .front {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .behind {
  transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) translateZ(100px);
}
/* pause */
.preserve3d .cube-wrapper .cube.pause, .preserve3d .cube-wrapper .cube:hover {
  -webkit-animation-play-state: paused !important;
  animation-play-state: paused !important;
}
/* open */
.preserve3d .cube-wrapper .cube.open .right {
  transform: rotateY(90deg) rotateX(-90deg) translateY(-100px) !important;
}
.preserve3d .cube-wrapper .cube.open .left {
  transform: rotateY(-90deg) rotateX(-90deg) translateY(-100px) !important;
}
.preserve3d .cube-wrapper .cube.open .front {
  transform: rotateX(-90deg) translateY(-100px) !important;
}
.preserve3d .cube-wrapper .cube.open .behind {
  transform: rotateY(180deg) rotateX(-90deg) translateY(-100px) !important;
}
.preserve3d .cube-wrapper .cube.origin-bottom .right {
  transform-origin: bottom !important;
}
.preserve3d .cube-wrapper .cube.origin-bottom .left {
  transform-origin: bottom !important;
}
.preserve3d .cube-wrapper .cube.origin-bottom .top {
  opacity: 0;
  pointer-events: none;
}
.preserve3d .cube-wrapper .cube.origin-bottom .front {
  transform-origin: bottom !important;
}
.preserve3d .cube-wrapper .cube.origin-bottom .behind {
  transform-origin: bottom !important;
}
/* animation */
@keyframes spin {
  from {
    transform: rotateX(-20deg) rotateY(42deg);
  }
  to {
    transform: rotateX(340deg) rotateY(382deg);
  }
}
＆＃13; 
<button id="toggle">toggle</button>
<div class="preserve3d">
  <div class="cube-wrapper">
    <div class="cube">
      <div class="side right">Right
      </div>
      <div class="side left">Left
      </div>
      <div class="side top">Top
      </div>
      <div class="side bottom">Bottom
      </div>
      <div class="side front">Front
      </div>
      <div class="side behind">Behind
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

虽然它被移到一个奇怪的位置，检查员说它在正确的位置。 使用 getComputedStyle 也会提供正确的值，因此我不知道如何调试此问题。

我搜索并发现Safari在使用rotateY时遇到了一些问题并尝试了给定的解决方案，给出了z-index值，但是没有用。

以下是代码缩短版：https://jsfiddle.net/7mxghcq9/

提前感谢你：）

2 个答案:

答案 0 :(得分：1)

清除历史记录并尝试重新加载页面。这也发生在我身上，清除缓存工作正常。你可以完全旋转提供它的safari 9.你正在使用webkit所以它应该是好的。我自己测试过，对我来说很好用

答案 1 :(得分：1)

对不起，我不能确切地说出会发生什么，也不确定Safari的行为是否完全错误......

无论如何，一个有效的解决方案是在第一次超时内移动cube.style.animation = 'none';，然后在删除其暂停状态之前触发重排。

function open() {
  // Set transform value to current position
  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;
  
  // Disable Animation & Rotate the cube to its initial position & Remove pause
  setTimeout(function() {
    cube.style.animation = "none";
    cube.offsetWidth; // force a reflow
    cube.classList.remove("pause");
    cube.classList.add("origin-bottom");
    cube.style.transform = "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
}

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);
}
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%;
}
.cube-wrapper .cube {
  width: 200px;
  height: 200px;
  position: relative;
  bottom: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transition: all 1s ease-in-out;
  animation: spin 15s infinite linear;
}
.cube-wrapper .cube .side {
  transition: transform 1s ease-in-out, background 0.5s ease-in-out, opacity 0.5s ease-in-out;
  outline: 1px solid rgba(250, 250, 250, 0.3);
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
}
.cube-wrapper .cube .right {
  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .left {
  transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .top {
  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .bottom {
  transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .front {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .behind {
  transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) translateZ(100px);
}
/* pause */
.preserve3d .cube-wrapper .cube.pause, .preserve3d .cube-wrapper .cube:hover {
  -webkit-animation-play-state: paused !important;
  animation-play-state: paused !important;
}
/* open */
.preserve3d .cube-wrapper .cube.open .right {
  transform: rotateY(90deg) rotateX(-90deg) translateY(-100px) !important;
}
.preserve3d .cube-wrapper .cube.open .left {
  transform: rotateY(-90deg) rotateX(-90deg) translateY(-100px) !important;
}
.preserve3d .cube-wrapper .cube.open .front {
  transform: rotateX(-90deg) translateY(-100px) !important;
}
.preserve3d .cube-wrapper .cube.open .behind {
  transform: rotateY(180deg) rotateX(-90deg) translateY(-100px) !important;
}
.preserve3d .cube-wrapper .cube.origin-bottom .right {
  transform-origin: bottom !important;
}
.preserve3d .cube-wrapper .cube.origin-bottom .left {
  transform-origin: bottom !important;
}
.preserve3d .cube-wrapper .cube.origin-bottom .top {
  opacity: 0;
  pointer-events: none;
}
.preserve3d .cube-wrapper .cube.origin-bottom .front {
  transform-origin: bottom !important;
}
.preserve3d .cube-wrapper .cube.origin-bottom .behind {
  transform-origin: bottom !important;
}
.cube.origin-bottom{
  animation-fill-mode: forwards;
}
/* animation */
@keyframes spin {
  from {
    transform: rotateX(-20deg) rotateY(42deg);
  }
  to {
    transform: rotateX(340deg) rotateY(382deg);
  }
}
<button id="toggle">toggle</button>
<div class="preserve3d">
  <div class="cube-wrapper">
    <div class="cube">
      <div class="side right">Right
      </div>
      <div class="side left">Left
      </div>
      <div class="side top">Top
      </div>
      <div class="side bottom">Bottom
      </div>
      <div class="side front">Front
      </div>
      <div class="side behind">Behind
      </div>
    </div>
  </div>
</div>

相关问题
最新问题