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)";
Ваш недостающий - на второй строке, это может быть проблемой.
