使用CSS透视图时,Chrome中可能出现的错误

时间:2016-12-21 08:39:21

标签: javascript html css css3 google-chrome

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

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

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

基本上按下按钮并更改内联CSS时,不会应用perspective效果。 为了应用此效果,用户需要调整浏览器窗口的大小,否则代码应在换行perspective上替换为相同的值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>

5 个答案:

答案 0 :(得分:1)

据我所知,它看起来像浏览器的错误。目前我正在使用以下工作来解决此问题。 该hack包括强制DOM重绘/刷新使用伪元素切换类:    .force-redraw::before { content: "" } 该错误似乎与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>

答案 1 :(得分:0)

如果将样式从内联元素中分离出来,它会起作用:

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)';
});
#box-6o80mut6 {
  position: absolute;
  top: 50px;
  left: 25px;
  perspective: 250px;
  z-index: 0;
}
#target {
  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;
  perspective: 250px;
}
<button id="btn" type="button">Change rotation</button>
<div id="box-6o80mut6">
  <div id="target">
  </div>
</div>

答案 2 :(得分:0)

height问题:

var target = document.querySelector('#target');
document.querySelector('#btn').addEventListener('mousedown', function(event) {
  target.style.height = "300px";
  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>

答案 3 :(得分:0)

在应用样式时,我认为将这些样式分配给类并使用JS来切换类是一种更好的做法。

这样它更干净,并且按预期工作。

var target = document.querySelector('#target');
document.querySelector('#btn').addEventListener('mousedown', function(event) {
  target.classList.add('myclass');
});
.original {
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;
}
.myclass {
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" class="original">
  </div>
</div>

答案 4 :(得分:0)

我真的没有解释,但我已经遇到了一些与chrome有类似问题(但不是因为内联样式)。

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

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)';
  target.style.borderColor = 'transparent';
// this forces a repaint, not visible
  target.offsetWidth;
  target.style.borderColor = 'black';
});
<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: absolute; 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>