CSS3 Translate3d Мышь События Проблема

Question

Итак, у меня есть этот бит кода: jsfiddle.net / XNvzW

Цветные блоки настроены в трехмерной сцене, где цветные прямоугольники частично перекрываются и имеютследующие значения z: 10, 5, 0, -5, -10 (числа в верхнем правом углу поля).Когда вы наводите курсор мыши на поле, цвет меняется, и вы увидите сообщение, говорящее: зависание над # x.block.Довольно просто.

Теперь иногда отрицательные блоки z работают (и реагируют на события мыши, как в CSS с помощью: hover, так и в JS с помощью $ .mouseenter ()), а иногда они этого не делают, кажетсясовершенно непоследовательно относительно того, когда и почему.Кажется, есть какая-то проблема с отрицательным значением свойства TranslateZ, W3C даже использует отрицательное значение в своем примере того, как можно использовать Z. Один релевантный stackoverflow вопрос , который я нашел, неПохоже, я не получаю много обсуждений или ответов на вопросы.

Мысли?

Я должен добавить, что это работает нормально в Internet Explorer 9.0, но не в браузерах на основе WebKit..

Найдена эта ошибка, хранящаяся в WebKit (но это не совсем то, что у меня происходит)

Answer 1

Добавьте положительный translateZ к родительскому объекту обрезанного объекта, чтобы компенсировать отрицательное значение: в этом случае -webkit-transform: translate3d(0px,0px,10px); к родительскому #stage div.Это переводит элементы над плоскостью браузера (z: 0), которая останавливает события щелчка и наведения, когда div становится отрицательным относительно плоскости браузера Z (элемент body).Это происходит только в Chrome и Safari (а также в мобильном Safari).Я не верю, что это обязательно ошибка, если вы думаете о теле как о обработчике последнего события.

Вы можете увидеть это в действии: на вашем jsfiddle, если вы переводите Z #stage в 5px васВы увидите, что div -5px теперь работает, но div -10px все еще не работает.