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

#jquery #video #safari #cufon

#jquery #Видео #safari #cufon

Вопрос:

Веб-сайт: http://ghostpool.com/wordpress/slide /

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

Комментарии:

1. При наведении курсора мыши на слайд с видео заголовки появляются снова и остаются слишком … странными

2. @Myles: Да, я заметил это, я упомяну об этом в своем первоначальном посте.

Ответ №1:

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

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

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

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

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

-Simo «

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

Я также обнаружил, что это проще в использовании

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

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

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

Ответ №2:

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

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

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

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

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

Комментарии:

1. Я внедрил рекомендованное вами исправление и обнаружил, что у него есть свои проблемы. Например, если вы используете шрифт, который плохо обрабатывает специальные символы Html, вы не можете обернуть их в теги span и попытаться расположить их. Как только вы применяете эту позицию: static, это серьезно ограничивает возможности размещения текста Cufon’d. Я добавил запрос о проблеме в репозиторий git разработчика. Надеюсь, исправление будет найдено в ближайшее время.