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

2019年7月28日 214次阅读

当用户单击按钮时,我使用以下代码更改元素的rotateY.

div包装器使用透视CSS属性来创建类似3D的效果.

我面临的问题仅限于Chrome,目前我正在测试版本55.0.2883.87 m(64位).

基本上,当按下按钮并且内联CSS发生更改时,不会应用透视效果.
为了应用此效果,用户需要调整浏览器窗口的大小,或者代码应该在包装div上替换为相同的值透视图.

在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>

最佳答案 据我所知,它看起来像浏览器的错误.目前我正在使用以下工作来解决此问题.

该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>
点赞