webkit-transform перезаписывает порядок z-index в Chrome 13

Question

Обновление

Приносим извинения за то, что не добавили мелкие детали, так как мы также накладываем множество элементов 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)";

Answer 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);">

Answer 2

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

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

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

Answer 3

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

Вы пропустили - во второй строке, это может быть проблемой.

Answer 4

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

Answer 5

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