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

当用户单击按钮时，我使用以下代码更改元素的旋转

div

wrapper使用

perspective

CSS属性创建类似3D的效果

我面临的问题仅限于Chrome，目前我正在测试55.0.2883.87 m版（64位）

基本上，当按下按钮且内联CSS更改时，

透视图

效果不会应用。 为了应用此效果，用户需要调整浏览器窗口的大小，或者代码应替换为包装

div

上相同的值

perspective

在

Firefox 50.1.0

上，问题不存在，当用户滑动按钮时，

div

应用了正确的透视图

我想知道：

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

注: -我有应用所有CSS内联的限制，因为我不能切换CSS类

var target=document.querySelector（'#target'）；
document.querySelector（'#btn'）.addEventListener（'mousedown'，函数（事件）{
target.style.transform='rotateZ（0deg）rotateY（45 deg）rotateX（0deg）skewY（0deg）skewX（0deg）scaleX（1）scaleY（1）'；
});
更改旋转
如果您将样式从内联元素中拆分出来，它确实有效：


var target=document.querySelector（'#target'）；
document.querySelector（'#btn'）.addEventListener（'mousedown'，函数（事件）{
target.style.transform='rotateZ（0deg）rotateY（45 deg）rotateX（0deg）skewY（0deg）skewX（0deg）scaleX（1）scaleY（1）'；
});
#box-6o80mut6{
位置：绝对位置；
顶部：50px；
左：25px；
透视图：250px；
z指数：0；
}
#目标{
职位：继承；
顶部：0px；
左：0px；
宽度：304px；
高度：204px；
变换：rotateZ（0度）rotateY（0度）rotateX（0度）skewY（0度）skewX（0度）scaleX（1）scaleY（1）；
边界半径：10px；
边框样式：实心；
边框宽度：0px；
背景色：rgb（82165255）；
边框颜色：rgb（0,0,0）；
不透明度：1；
盒影：rgba（0,0,0,0.498039）0px 0px 0px 0px；
透视图：250px；
}
更改旋转
您的身高有问题：


var target=document.querySelector（'#target'）；
document.querySelector（'#btn'）.addEventListener（'mousedown'，函数（事件）{
target.style.height=“300px”；
target.style.transform='rotateZ（0deg）rotateY（45 deg）rotateX（0deg）skewY（0deg）skewX（0deg）scaleX（1）scaleY（1）'；
});
更改旋转
在应用样式时，我认为将这些样式分配给类并简单地使用JS切换类是一种更好的做法

这样，它更干净，工作正常


var target=document.querySelector（'#target'）；
document.querySelector（'#btn'）.addEventListener（'mousedown'，函数（事件）{
target.classList.add（'myclass'）；
});
。原版{
位置：继承；顶部：0px；左侧：0px；宽度：304px；高度：204px；变换：rotateZ（0deg）rotateY（0deg）rotateX（0deg）skewY（0deg）skewX（0deg）scaleX（1）scaleY（1）；边框半径：10px；边框样式：实心；边框宽度：0px；背景颜色：rgb（82165，255）；边框颜色：rgb（0，0，0）；不透明度：1；方框阴影：rgba（0，0，0，0，0.498039）0px 0px 0px 0px；
}
.myclass{
变换：rotateZ（0度）rotateY（45度）rotateX（0度）skewY（0度）skewX（0度）scaleX（1）scaleY（1）；}
更改旋转
据我所知，它看起来像是浏览器的bug。目前，我正在使用以下解决方法来解决此问题。
黑客行为包括强制DOM重画/刷新将带有伪元素的类切换为：

.强制重画：：之前{
内容：“”
}

该错误似乎与DOM重画/刷新有关，因此必须手动强制执行

不过，如果你知道更好的方法或正确的解决方法，请张贴你的答案


var target=document.querySelector（'#target'）；
document.querySelector（'#btn'）.addEventListener（'mousedown'，函数（事件）{
target.classList.toggle（'force-redraw'）；
target.style.transform='rotateZ（0deg）rotateY（45 deg）rotateX（0deg）skewY（0deg）skewX（0deg）scaleX（1）scaleY（1）'；
});
.force redraw:：before{
内容：“”
}
轮换我
你自己试试看»
我没有真正的解释，但我已经在chrome上遇到了一些类似的问题（但这不是因为内联样式）

解决方法是在发生转换后强制浏览器重新渲染：


var target=document.querySelector（'#target'）；
document.querySelector（'#btn'）.addEventListener（'mousedown'，函数（事件）{
target.style.transform='rotateZ（0deg）rotateY（45 deg）rotateX（0deg）skewY（0deg）skewX（0deg）scaleX（1）scaleY（1）'；
target.style.borderColor='透明'；
//这将强制重新绘制，不可见
target.offsetWidth；
target.style.borderColor='黑色'；
});
更改旋转
已编辑-同一期。FF工作正常。同样的问题，如果检查元素，它实际上显示了正确形状的轮廓，非常奇怪。谢谢，但在我的特殊情况下，我需要更改内联，我不能切换类。谢谢你在这个问题上花时间，我明白了你的意思，但不幸的是，我可以使用在线内联CSS，我尝试按照你的建议，用
绝对
替换
继承
，我仍然遇到同样的问题，你可以看看这里：@GibboK，我不认为它可以链接到
元素中的内联样式vs。。。不管怎么说，我用了一个不同于你的解决方法来编辑。