CSS3, элемент с translateZ<0 не ловит ивенты
 

В хроме и опере сабж. В огнелисе все норм.

<img src="http://javascript.ru/cat/list/event.gif" onclick="alert(1)" style="transform: translateZ(100px);">
<img src="http://javascript.ru/cat/list/event.gif" onclick="alert(2)" style="transform: translateZ(0px);">
<img src="http://javascript.ru/cat/list/event.gif" onclick="alert(3)" style="transform: translateZ(-100px);">

На третей картинке не срабатывают ни ивенты ни даже img:hover.
Как пофиксить?:help:
Песочница: http://learn.javascript.ru/play/ePJLac
Спасибо.

Хз, у меня в хроме работает. Поставь z-index побольше, мож заработает.

Заработало когда убрал transform-style: preserve-3d; у контейнера.
Сейчас другая проблема - добавил еще 8 картинок и теперь сильные тормоза в FF, но когда включаю отладочную панель (F12), работает намного быстрее. Предполагаю, что FF как-то прозёвывает события, а когда отображается панель он их ловит чтобы показывать отладочную инфу.

Используешь небось setInterval вместо requestAnimationFrame?

неее, с паралаксом играюсь - ловлю mousemove и клики

Ну да, какие-то очередные глюки с конкретным css свойством.
Если сделать так:

document.body.onmousemove = function (e) {
    e = e || event;
    container.style.perspectiveOrigin = (e.clientX/sw-0.5)*50+50 + '% ' + +((e.clientY/sh-0.5)*20+50) + '%';
    container.style.borderBottom = '2px solid rgb(' + [0,0,0].map(e=>Math.floor(Math.random()*255)) + ')';
}

то начинает работать.

Спасибо. Я уже сам допетрил до чего-то подобного. Видимо FF считает, что раз ничего на странице не изменилось (perspectiveOrigin для него не авторитет :no:), то и перерисовывать ничего не надо. Нужны хоть какие-то изменения, причем даже не в данном контейнере, а лишь бы где-то на странице, и все работает. Сейчас просто вывожу координаты курсора:

log.innerHTML = e.clientX+','+e.clientY;