Видео HTML5 вызывает странный сбой в CSS: переход при наведении курсора, плохо работает в разных браузерах.

Моя главная страница находится здесь: http://thenozzle.net/

Логотип в верхней части страницы представляет собой спрайт, который переключается между верхом и низом, создавая эффект свечения. Это делается с помощью перехода css и псевдоэлемента :hover.

Однако недавно я добавил видеоплеер projekktor HMTL5. Это работает очень хорошо, но если вы запускаете видео, а затем наводите курсор на логотип, он глючит при наведении курсора мыши.

Кроме того, Google Chrome не воспроизводит видео из клипа ea.com The Battlefield 3. Chrome не будет играть, эти две вещи сводят меня с ума. Могут ли они быть связаны? Что я делаю неправильно?

Домашняя страница Projekktor: http://www.projekktor.com/

В каждом браузере он работает по-разному. Ужасно тормозит в Firefox, но играет. Идеально подходит для Safari, Chrome вообще не воспроизводится, но у Safari есть глючный логотип. Есть идеи?


css-transitions hover html5-video sprite
person alt    schedule 18.06.2011    source источник
comment
можешь снять небольшое видео глюка и выложить куда-нибудь, у меня вроде нормально работает   -  person Euqil    schedule 18.06.2011
comment
Глюк в сафари. Играет ли он у вас в Chrome?   -  person alt    schedule 18.06.2011
comment
это проблема? он также не работает в IExplore... imageshack.us/photo/my -images/857/glitchg.png   -  person Euqil    schedule 18.06.2011
comment
Нет, это просто из-за того, что у меня в настоящее время нет исправления ошибок IE. Вы пробовали в Сафари? Если вы можете сказать мне, в каких браузерах вы получаете это, чтобы играть, я был бы признателен.   -  person alt    schedule 18.06.2011
comment
сначала я пропустил ссылку на Safari (blush), но я попробовал в Opera (выглядит нормально для меня), Firefox (вообще никаких проблем - не медленно или что-то в этом роде) и Explorer   -  person Euqil    schedule 18.06.2011
comment
подождите... видео в Firefox вообще не глючило? Превосходно! Должно быть, моя дерьмовая видеокарта. Теперь еще более странная проблема глюка, сниму видео   -  person alt    schedule 18.06.2011
comment
Я не знаю куда кинуть видео. :/ Но это очень странно, он просто отключается, когда вы наводите на него курсор мыши, и дергается. Я знаю, что это вызвано видео, потому что этого не происходит, пока вы не нажмете кнопку воспроизведения и видео не загрузится.   -  person alt    schedule 18.06.2011
comment
может быть, это действительно проблема вашего GC   -  person Euqil    schedule 18.06.2011
comment
или, может быть, игрок каким-то образом получает фокус в цикле...   -  person Euqil    schedule 18.06.2011
comment
выложи видео на ютуб, очень хочу узнать решение :)   -  person Euqil    schedule 18.06.2011
comment
Ютуб ничего не сделал. Глюка не было. Не могли бы вы еще раз протестировать производительность видео в Firefox?   -  person alt    schedule 18.06.2011
comment
Я думаю, что это просто плохая производительность javascript, строка меню тоже работает медленно?   -  person alt    schedule 18.06.2011
comment
нет, я имею в виду - сделайте десктопное видео о сбое, которое вы получаете, и загрузите его на YouTube, чтобы мы могли увидеть, что оно делает.   -  person Euqil    schedule 18.06.2011
comment
Я понял, это связано с наличием обернутой «ссылки». Если его удалить, то глюка нет, но и ссылки на дом тоже нет. Хм....   -  person alt    schedule 18.06.2011
comment
это был не заголовок, это было ТОЛЬКО свойство text-indent!   -  person alt    schedule 18.06.2011

Ответы (1)


arrow_upward
1
arrow_downward

Я починил это. Я удалил 1 из двух якорей и удалил свойство text-indent заголовка из div и поместил его на один якорь. Странная проблема, странное решение. Для справки в будущем, не пытайтесь делать отступ текста, который скрыт более чем на один уровень в глубину, при наведении курсора он будет прыгать вперед и назад по спирали.

<div title="The Nozzle" id="headerlogo">
    <div title="The Nozzle" id="logo1"></div>
    <a style="text-indent:-9999px" title="The Nozzle" href="http://thenozzle.net/"><div title="The Nozzle" id="logo2"></div>The Nozzle</a>
</div>
person alt    schedule 18.06.2011