HTML-элемент, преобразованный в 3D CSS с отрицательным значением z, не запускает события

В следующем сценарии мы видим два элемента div с примененными 3D-преобразованиями CSS3 внутри контейнера. Оба должны запускать событие при нажатии. В этом случае отображается предупреждение, указывающее, какой элемент div был нажат.

<!DOCTYPE html>
<html>
<body>
  <div style="-webkit-perspective: 600; -webkit-transform-style: preserve-3d; width: 500px; height: 200px; overflow: hidden;">
    <div onclick="alert('1');" style="-webkit-transform: translate3d(0px, 0px, -100px); background-color: blue; position: absolute; width: 100px; height: 100px;">
    </div>
    <div onclick="alert('2');" style="-webkit-transform: translate3d(200px, 0px, 100px); background-color: red; position: absolute; width: 100px; height: 100px;">
    </div>
  </div>
</body>
</html>

Проблема в том, что только второй div показывает желаемое поведение. Щелчки по первому div не приводят к показанному предупреждению (проверено на последних версиях Safari, Chrome и Safari iOS).

Как только я меняю отрицательное значение z с -100px на 0px или положительное значение, все работает нормально.

Это баг браузера? И есть ли способ добиться желаемого поведения?


events html css translate3d
person Benjamin    schedule 19.07.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Я видел эту проблему раньше:

проблема перехода CSS3 на устройствах iOS

Webkit Mobile не любит отрицательные значения z-index в сочетании с 3D-преобразованиями. W3C заявляет, что z-index должен быть целым числом http://www.w3.org/TR/CSS2/visuren.html#z-index, но на практике — из-за устаревших проблем с Firefox, а теперь и с Webkit — лучше придерживаться положительных чисел.

person methodofaction    schedule 19.07.2011
comment
Я понимаю. Но в этом случае у нас нет отрицательных значений z-индекса (2D-пространство). У нас есть отрицательные значения по оси Z для элементов в трехмерной системе координат (например, translate3d(0px, 0px, -100px)). Ситуация мне видится другой. - person Benjamin; 20.07.2011

arrow_upward
0
arrow_downward

Добавьте положительное значение translateZ к родительскому элементу обрезанного объекта, чтобы компенсировать отрицательное значение дочернего элемента. Это переводит элементы над плоскостью браузера элемента body (z:0), что останавливает события щелчка и наведения, когда div становится отрицательным относительно плоскости Z браузера. Это происходит только в Chrome и Safari (а также в мобильном Safari).

Я не верю, что это обязательно ошибка, если вы считаете тело последним обработчиком событий.

person Richard    schedule 18.08.2012

arrow_upward
0
arrow_downward

В родительском DIV измените -webkit-transform-style: save-3d; to -webkit-transform-style: плоский; Он отлично работает для меня.

person inruby    schedule 22.10.2015