javascript - 使用 CSS 透视图时 Chrome 中可能存在的错误

Question

我正在使用以下代码在用户单击按钮时更改元素的 rotateY。

div 包装器使用 perspective CSS 属性来创建类似 3D 的效果。

我面临的问题仅在 Chrome 上出现，目前我正在测试版本 55.0.2883.87 m(64 位)。

基本上，当按下按钮并且内联 CSS 发生变化时，perspective 效果不会被应用。为了应用这种效果，用户需要调整浏览器窗口的大小，或者代码应该在包装 div 上用相同的值 perspective 替换。

在 Firefox 50.1.0 上，问题不存在，当用户滑动按钮时，div 应用了正确的视角。

我想知道:

• 如果您在浏览器中遇到同样的问题。
• 如果是 Chrome 上的已知错误或我的代码有问题。
• 如果您知道任何解决方法或修复方法。

注意事项:- 由于无法切换 CSS 类，我无法应用所有内联 CSS。

var target = document.querySelector('#target');
document.querySelector('#btn').addEventListener('mousedown', function(event) {
  target.style.transform = 'rotateZ(0deg) rotateY(45deg) rotateX(0deg) skewY(0deg) skewX(0deg) scaleX(1) scaleY(1)';
});

<button id="btn" type="button">Change rotation</button>
<div id="box-6o80mut6" style="position: absolute; top: 100px; left: 250px; perspective: 250px; z-index: 0;">
  <div id="target" style="position: inherit; top: 0px; left: 0px; width: 304px; height: 204px; transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) skewY(0deg) skewX(0deg) scaleX(1) scaleY(1); border-radius: 10px; border-style: solid; border-width: 0px; background-color: rgb(82, 165, 255); border-color: rgb(0, 0, 0); opacity: 1; box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 0px 0px;">
  </div>
</div>

Answer 1

据我了解，这看起来像是浏览器的错误。目前我正在使用以下解决方法来解决此问题。hack 在于强制 DOM 重绘/刷新切换具有伪元素的类，如下所示:
.force-redraw::before {
内容: ””
}
该错误似乎与 DOM 重绘/刷新有关，因此必须手动强制执行。

如果您知道更好的方法或正确的修复方法，请发布您的答案。

var target = document.querySelector('#target');
document.querySelector('#btn').addEventListener('mousedown', function(event) {
  target.classList.toggle('force-redraw');
  target.style.transform = 'rotateZ(0deg) rotateY(45deg) rotateX(0deg) skewY(0deg) skewX(0deg) scaleX(1) scaleY(1)';
});

.force-redraw::before {
  content: ""
}

<button id="btn" type="button">Rotate me</button>
Try it Yourself »
<div id="wrapper" style="position: absolute; top: 150px; left: 250px; width: 304px; height: 204px; perspective: 1000px; z-index: 0;">
  <div id="target" style="position: inherit; top: 0px; left: 0px; width: inherit; height: inherit; transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) skewY(0deg) skewX(0deg) scaleX(1) scaleY(1); border-radius: 10px;  background-color: rgb(82, 165, 255);">
  </div>
</div>