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

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

2 голосов
/ 19 июля 2011

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

<!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 или положительное значение, все работает нормально.

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

Ответы [ 3 ]

1 голос
/ 19 июля 2011

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

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

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

0 голосов
/ 22 октября 2015

В родительском DIV измените -webkit-transform-style: preserve-3d;-webkit-transform-style: flat;у меня это нормально работает.

0 голосов
/ 18 августа 2012

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

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

...