Наличие видео влияет на текст Cufon в Safari

Question

Сайт: http://ghostpool.com/wordpress/slide/

Если нажать кнопку «+» в нижнем левом углу, чтобы открыть нижний колонтитул, текст заголовка куфона быстро перемещается или исчезает в Safari (с использованием 5.0.3). Проблема не возникает ни в одном другом браузере. Если я удалю или наведу курсор мыши на видео с пятого слайда в слайдере или покажу нижний колонтитул по умолчанию без функции переключения, проблема исчезнет. Это означает, что должна быть проблема с наличием видео и cufon в Safari. Любая помощь в решении этой проблемы приветствуется.

Answer 1

Спросив создателя Cufon об этой ошибке, он ответил с этим

https://github.com/sorccu/cufon/issues/199

» Привет, я не сталкивался с этим раньше, но вы можете попробовать добавить z-index (практически любое значение, кроме auto) к позиционируемым элементам cufon вместо удаления позиционирования. Это просто может помочь. В качестве альтернативы, вы можете попробовать добавить z-index к самому видео (или сделать его позиционированным, если это еще не сделано).

Пожалуйста, дайте мне знать, как это происходит. Кроме того, я думаю, что эта проблема, вероятно, затрагивает полотна в целом. Команда Safari, вероятно, исправит это на своей стороне (рано или поздно ...). На этом сайте также могут быть другие связанные проблемы, например, подменю иногда остаются частично отрендеренными.

Следующая версия (1.10) на самом деле больше не использует позиционирование, поэтому я думаю, что тогда проблема может исчезнуть. Но, пожалуйста, не спрашивайте, когда он выйдет, потому что я понятия не имею.

-Simo «

Похоже, что добавление значения z-index для чего угодно, кроме auto, также исправит эту проблему. Использование position: static слишком ограничивает контроль над текстом Cufon

Мне также было проще использовать

*.cufon-canvas { 
  z-index: 0;
}

вместо исправления, предложенного GhostPool.

Единственное, что мне не нравится ни в одном из этих исправлений, - это если вы пытаетесь вложить тег span в любой блок cufon и попытаться изменить его атрибут позиции. Это своего рода игнорирует исправление z-index.

Answer 2

Хорошо, мне удалось решить эту проблему с помощью CSS fix.

Тексту cufon присваивается позиция: по умолчанию относительно, вам нужно отменить это с помощью position: static. Добавьте следующее в свою таблицу стилей.

  h3 cufon,
  h3 canvas {
  position: static !important;
  }

Измените h3 на любой элемент, который вы хотите применить. Вам нужно прочитать положение: относительный стиль к Internet Explorer, поскольку он не обрабатывает положение: слишком хорошо статично. Так что добавьте это в таблицу стилей IE.

 h3 cufon,
 h3 canvas {
 position: relative !important;
 }