All geek questions in one place

Possible error in Chrome when using CSS perspective

I use the following code to change an rotateYitem when a user clicks a button.

The wrapper divuses the perspectiveCSS property to create a 3D effect.

The problem I encountered is only in Chrome , I am currently testing version 55.0.2883.87 m (64-bit version).

Basically, when a button is pressed and the inline CSS changes, the effect is perspectivenot applied. To apply this effect, the user needs to resize the browser window, or the code must be replaced with the same value perspectiveon the wrapper div.

The Firefox 50.1.0problem does not exist, and when the user spot button divhas the right perspective.

I'd like to know:

  • If you have the same problem in your browser.
  • If this is a known bug in Chrome or a problem with my code.
  • If you know any work or fix.

Notes: - I have a restriction on the use of all inline CSS, since I cannot switch CSS classes.

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>
Run codeHide result
+4
source share
5 answers

For me it seems like a browser error. I am currently using the following work to solve this problem. The hack is to force the DOM to redraw / update the class with the pseudo-element as: The .force-redraw::before { content: "" } error is related to redrawing / updating the DOM, so it must be manually forced.

, , .

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>
Hide result
+1

, :

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>
Hide result
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>
Hide result
0
source

When applying styles, I find it best to apply these styles to classes and just use JS to switch classes.

Thus, it is much cleaner and works as expected.

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>
Run codeHide result
0
source

I have no explanation, but I have already encountered a similar problem with chrome (but that was not due to the inline styles).

The workaround is to force the browser to re-display after the conversion has occurred:

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>
Run codeHide result
0
source

Source: https://habr.com/ru/post/1664401/

More articles:


All Articles