Возможная ошибка в Chrome при использовании перспективы CSS

Question

Я использую следующий код для изменения rotateY элемента, когда пользователь нажимает кнопку.

Использование обертки divperspective Свойство CSS для создания эффекта одинакового 3D.

Проблема, с которой я столкнулся, находится на Chrome только, в настоящее время я тестирую версию 55.0.2883.87 м (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>

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

Answer 2

вы проблемы с 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>

Answer 3

При применении стилей я считаю, что это лучшая практика, чтобы назначить эти стили классов и просто с помощью 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>

Answer 4

Для моего понять это выглядит как ошибка браузера. В настоящее время для решения этой проблемы я использую следующую работу. Хак состоит в том, чтобы заставить 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>

Answer 5

Я действительно не имею объяснения, но я уже сталкивался с каким-то подобным вопросом с хромом (но это не из-за встраиваемые стили).

Чтобы обойти эту проблему, чтобы заставить браузер вновь сделать после того, как преобразование произошло:

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>