javascript - Safari 12.1 中的变换原点动画问题

Question

根据水平鼠标位置更改 div 变换原点的简单动画。

在 Safari 12.1 中不显示动画。相反，div 卡在显示它在页面加载时的转换原点(调整浏览器的大小似乎会更新它)。

脚本正在将正确的值输出到元素上，并且没有出现任何错误，因此需要一些帮助来让它动画化。

它适用于最新的 Chrome、Firefox 和 Safari 11，只是最新的 Safari 有问题。

$(document).mousemove(function(getCurrentPos){
    var xCord = getCurrentPos.clientX;
    var xPercent = xCord/window.innerWidth * 100 + "%";
    document.getElementById("p-beam").style.transformOrigin = xPercent + "100%"; 
});

.beams {
  display: block;
  position: relative;
  overflow: hidden;
  height: 600px;
  background-color: #434343;
}

.p-beam {
  position: absolute;
  left: 0;
  top: -360px;
  right: 0;
  bottom: auto;
  width: 100px;
  height: 360px;
  margin-right: auto;
  margin-left: auto;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#eef));
  background-image: linear-gradient(180deg, transparent, #eef);
  -webkit-transform: perspective(360px) rotateX(-104deg) rotateY(0) rotateZ(0);
  transform: perspective(360px) rotateX(-104deg) rotateY(0) rotateZ(0);
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="beams">
  <div id="p-beam" class="p-beam"></div>
</div>

Answer 1

这看起来像一个错误。

我可以通过更改 bean 的 innerHTML/innerText 来让它工作，我认为这样它会强制布局/绘制。

我担心您绘制的区域可能太大，即使这是一个错误，这也可能太昂贵并且您正在达到渲染器的极限。但这只是猜测。

我知道这不一样，但也许你可以通过 transform: rotate() 或 transform: matrix() 完成视觉上相似的事情

const beam = document.getElementById("p-beam");
let i=0;

setInterval(()=>{
  i=(i+1)%100;
  const x = `${i%100}% ${100}%`
  beam.style.transformOrigin = x;
  beam.innerHTML = i;
  //console.log(x)
}, 16);

.p-beam {
  position: absolute;
  left: 0;
  top: -360px;
  right: 0;
  bottom: auto;
  width: 100px;
  height: 360px;
  margin-right: auto;
  margin-left: auto;
  background: yellow;
  
  transform: perspective(360px) rotateX(-104deg) rotateY(0) rotateZ(0);
  
  transform-style: preserve-3d;
  box-sizing: border-box;
}

<div class="beams">
  <div id="p-beam" class="p-beam"></div>
</div>