Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.09.2014, 01:31
Новичок на форуме
Отправить личное сообщение для RadChand Посмотреть профиль Найти все сообщения от RadChand
 
Регистрация: 05.09.2014
Сообщений: 4

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.
Как пофиксить?
Песочница: http://learn.javascript.ru/play/ePJLac
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 05.09.2014, 08:09
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Хз, у меня в хроме работает. Поставь z-index побольше, мож заработает.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 06.09.2014, 00:18
Новичок на форуме
Отправить личное сообщение для RadChand Посмотреть профиль Найти все сообщения от RadChand
 
Регистрация: 05.09.2014
Сообщений: 4

Заработало когда убрал transform-style: preserve-3d; у контейнера.
Сейчас другая проблема - добавил еще 8 картинок и теперь сильные тормоза в FF, но когда включаю отладочную панель (F12), работает намного быстрее. Предполагаю, что FF как-то прозёвывает события, а когда отображается панель он их ловит чтобы показывать отладочную инфу.
Ответить с цитированием
  #4 (permalink)  
Старый 06.09.2014, 00:31
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Используешь небось setInterval вместо requestAnimationFrame?
__________________
29375, 35
Ответить с цитированием
  #5 (permalink)  
Старый 06.09.2014, 01:48
Новичок на форуме
Отправить личное сообщение для RadChand Посмотреть профиль Найти все сообщения от RadChand
 
Регистрация: 05.09.2014
Сообщений: 4

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

Последний раз редактировалось RadChand, 07.09.2014 в 17:20.
Ответить с цитированием
  #6 (permalink)  
Старый 06.09.2014, 02:51
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Ну да, какие-то очередные глюки с конкретным 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)) + ')';
}
то начинает работать.
__________________
29375, 35

Последний раз редактировалось Aetae, 06.09.2014 в 03:22.
Ответить с цитированием
  #7 (permalink)  
Старый 06.09.2014, 03:55
Новичок на форуме
Отправить личное сообщение для RadChand Посмотреть профиль Найти все сообщения от RadChand
 
Регистрация: 05.09.2014
Сообщений: 4

Спасибо. Я уже сам допетрил до чего-то подобного. Видимо FF считает, что раз ничего на странице не изменилось (perspectiveOrigin для него не авторитет ), то и перерисовывать ничего не надо. Нужны хоть какие-то изменения, причем даже не в данном контейнере, а лишь бы где-то на странице, и все работает. Сейчас просто вывожу координаты курсора:
log.innerHTML = e.clientX+','+e.clientY;
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Drag-n-Drop - перетянуть элемент Jugo ExtJS 1 10.08.2011 19:10