Safari + jQuery Thickbox = массивные визуальные глюки? - PullRequest
1 голос
/ 12 октября 2011

Мне нужна помощь, чтобы определить причину серьезного визуального сбоя на одном из моих производственных сайтов. Это происходит только с Safari - Chrome и все другие браузеры в порядке.

http://www.philanthropicdirectory.org/search

Это веб-сайт Drupal 6.x, на котором одновременно выполняется следующее:

  • jQuery 1.3.2 (база Drupal / по умолчанию)
  • jQuery 1.4.4 (Это используется здесь и там, переопределяя пространство имен jQuery в '$ js' для некоторых сложных операций, которые 1.3.2 не могут обработать)
  • jQuery UI 1.7.3
  • Thickbox 1.8.2.19 (я немного изменил этот .js)

ДЛЯ ВОСПРОИЗВОДСТВА:

  1. Нажмите на ссылку (посетите страницу): http://www.philanthropicdirectory.org/search
  2. Дважды щелкните (один раз по центру) на любой из 5 панелей 'flowflow', чтобы вызвать содержимое Thickbox
  3. После загрузки содержимого ТБ измените размер окна браузера по горизонтали влево или вправо
  4. Обратите внимание на странное смещение фонового изображения и фона
  5. Переключение между 5 значками «вкладок» в правом верхнем углу модальной системы
  6. В любой момент используйте Web Inspector, чтобы снять отметку, а затем перепроверить любое свойство CSS в любом месте
  7. Обратите внимание, как это мгновенно очищает / исправляет все визуальные сбои
  8. Снова измените размер окна браузера или перейдите между другими вкладками и обратите внимание, что глюки возвращаются.

Если вы заметили то же самое, что и я, было бы здорово получить конфигурацию вашего компьютера и версию Safari.

  • Перед Before resizing or tabbing

  • После изменения размера After resizing browser slightly

  • После табуляции After resizing, then tabbing to another tab

Изображения говорят сами за себя, и, насколько я мог проверить, я могу воспроизвести эту проблему только в следующих настройках с Safari:

  • MacPro, 6-ядерный Xeon (2010)
  • OS X 10.6.8
  • 2 монитора: 1x 23 "Cinema Display (старый серебряный) + 1x 27" Apple Cinema Display
  • ATI Radeon HD 5770 (версия для Mac с драйвером 01.00.436)
  • Safari 5.1 +

Я тестировал другие машины и другие машины с более ранними версиями Safari (4.x), и проблем просто нет.

Есть ли что-нибудь, что вы думаете, я могу проверить, чтобы выяснить, почему это происходит?

PS: Одновременное использование только одного монитора создает те же проблемы.

Ответы [ 2 ]

1 голос
/ 30 декабря 2011

РЕШЕНИЕ!

Я заметил, что это происходит с другим созданным нами сайтом - сайтом, не имеющим ничего общего с Drupal, с проблемой здесь, за исключением того факта, что этот новый также имеет файл Flash (SWF) в * 1005. * и я применял свойство CSS к элементу с отрицательным значением z-index.

Это происходило на этом новом веб-сайте, потому что контейнер для object в HTML был установлен на

z-index: -1;

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

Я смог навсегда исправить это, вместо этого установив любые элементы, расположенные сверху object

z-index: 1; /* or anything > 0 */

Учитывая это решение, я выискивал любой CSS-код z-index: -1 на веб-сайте Drupal и, конечно же, в контейнере Thickbox был элемент, который отображался на каждой вкладке, - большой зеленый «SEARCH». кнопка ввода. Это было разработано таким образом из-за визуальных потребностей (что-то связанное с фиктивной внутренней тенью на кнопке).

z-index: -1; culprit found!

Я отключил все свойство z-index для этого элемента, и вот-вот, фанк навсегда исчез на сайте Drupal.

Ура! Это было, безусловно, провидение, что я столкнулся с той же проблемой более остро на другом сайте.

Теперь я не уверен, что точная ошибка в Safari, которая стоит за этим без интенсивного тестирования, но все, что я знаю, это то, что object на странице + любой элемент рядом с ним, установленный на z-index: -1, равен общему падению ( на Mac под управлением Safari 5.x).

0 голосов
/ 12 октября 2011

Я проверил в Safari 5.1 (7534.50) на HP Xeon под Windows 7. Я не вижу никаких глюков.

Это странно.Похоже, что-то вроде расы.Может быть, есть ошибка в вашем драйвере ATI?Так как он исправляет себя при повторном рендеринге, возможно, вы могли бы где-то ввести задержку, которая могла бы дать ему больше времени для правильного рендеринга?

...