Webkit-transform перезаписывает z-индекс в Chrome 13

Обновление

Извините за то, что вы не добавили второстепенные детали, которые также накладывают много элементов div друг на друга с помощью z-index. Поработав больше с этой проблемой, кажется, что webkit-transform на самом деле беспорядок с упорядочением z-index и что фактическая проблема не связана с самими анимациями.

Окончательное обновление

В настоящее время я участвую в проекте, где мы разрабатываем приложение, которое довольно сильно относится к анимации CSS3. Мы анимации много div элементов вокруг с -webkit-transform и -webkit-transition.

Все хорошо, до сегодняшнего дня, когда все обновляемые элементы страницы исчезли. Кажется, что Google Chrome обновился с 12.xx до 13.0.782.107m, и теперь неожиданно свойства CSS3 с префиксами -webkit перестали работать и элементы, которые имеют это свойство, применяемые к ним, просто больше не отображаются. Удаление свойства -webkit-transform через отладчик Chrome делает элементы видимыми снова.

Кто-нибудь еще испытывал одни и те же проблемы или знал, как решить эту проблему?

Я мог бы добавить, что я попытался удалить только префиксы -webkit (оставив только transform), который затем показывает отсутствующие элементы, но тогда это не будет анимировать элементы вообще, поскольку свойство CSS3 transform не поддерживается.

Я также пробовал использовать el.style.webkitTransform и el.style.webkitTransform, не добившись успеха.

Пройдет какой-то примерный код, чтобы объяснить. Желательным результатом этого является перемещение sq1 и обнаружение sq2.

HTML:
<div id="sq1" style="z-index:10;">
<div id="sq2" style="z-index:5;">

JS
/* fetch the element */
var el = document.getElementById("sq1");
/* apply CSS */
el.style["-webkit-transition"] = "-webkit-transform 500ms linear";
el.style["-webkit-transform"] = "translate3d(30px, 30px, 0px)";

Ответ 1

Решила его самостоятельно через проб и ошибок. Думал, что я отчитаю, если кто-то еще наткнется на эту проблему. Следует отметить, что эта проблема не возникала до того, как Chrome обновил себя до Chrome 13 (13.0.782.107m).

Кажется, что трюк добавляет операцию translate3d к базовому элементу <div> (sq2) при объявлении (или, по крайней мере, перед анимацией sq1).

В противном случае операция translate3d на вышележащем <div> (sq1) приведет к тому, что рендеринг будет игнорировать z-index и поместить sq1 ниже sq2. Я предполагаю, что это потому, что sq1 определяется до sq2 в DOM, поэтому sq2 будет отображаться над ним.

Таким образом, кажется, что решение состоит в том, чтобы положить translate3d в определение <div>: s (добавить его как для простоты):

HTML:
<div id="sq1" style="z-index:10; -webkit-transform: translate3d(0px, 0px, 0px);">
<div id="sq2" style="z-index:5; -webkit-transform: translate3d(0px, 0px, 0px);">

Ответ 2

Это должно влиять только на любые элементы, которые позиционируются как абсолютные или относительные. Чтобы исправить эту проблему, вы можете применить следующую инструкцию css к каждому элементу, который указан таким образом и вызывает проблемы:

-webkit-transform: translate3d (0,0,0);

Это применит преобразование к элементу без фактического выполнения преобразования, но влияет на его порядок визуализации, чтобы он был выше элемента, вызывающего проблему.

Ответ 3

Я думаю, вам нужно попробовать использовать -webkit-transform или webkitTransform вместо webkit-transform.

Ответ 4

Используйте el.style.WebkitTransform (верхний регистр W).

Ответ 5

 el.style["-webkit-transition"] = "-webkit-transform 500ms linear";
 el.style["webkit-transform"] = "translate3d(30px, 30px, 0px)";

Ваш недостающий - на второй строке, это может быть проблемой.