Странная проблема с Google Maps и анимацией jQuery в Safari 5.1 - PullRequest
1 голос
/ 26 сентября 2011

У меня есть страница с картой Google и созданный мной слайдер, в котором используется простая горизонтальная анимация.

Все отлично работает, кроме Safari 5.1 (mac), где анимация испорчена (это не так)я не могу пройти весь путь).

Я обнаружил, что удаление карты (загруженной с помощью API v3) устраняет проблему.

Я настроил jsfiddle, чтобы вы могли проверить его:http://jsfiddle.net/tGRf6/29/ (просто нажмите «Далее», чтобы запустить слайдер)

РЕДАКТИРОВАТЬ Это может быть связано с «перекраской» и тому подобным, поскольку я заметил, что изменение размера окна приводит к слайдуна месте.

1 Ответ

1 голос
/ 01 октября 2011

Это обновление вашего примера работает в Safari 5.1: http://jsfiddle.net/tGRf6/33/

Удаление overflow:hidden из div#slider решило проблему.Чтобы снова скрыть другие элементы слайда, я обернул еще один <div id="innerslider"> вокруг <ul> и переместил свойство overflow:hidden из <div id="slider"> в этот новый <div> (плюс еще немного CSS).

Я бы все же (сначала поиск, а затем) выпустил отчет об ошибке с вашим примером jsfiddle, указав, что переполнение: скрытый, кажется, каким-то образом вовлечен.

Надеюсь, это поможет.


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

  • Замена метода .animate () на простой JavaScriptиспользование setTimeout не изменило эффект.

  • Не анимированное изменение свойства left работает, как и ожидалось, однако, с включенной картой, это всегда "1 щелчок позади" (сначалащелчок изменяет свойство на -800, но ничего не меняется, второй щелчок устанавливает его на -1600, но отображается средний ползунковый элемент и т. д.).

  • Уменьшение длительности анимации до20 усугубляет ошибку, так как «шаг пикселя» увеличивается за одну итерацию.Опять же, похоже, что последнее изменение не «проходит».Соответственно, при установке длительности на 800 (1 мс / px) элемент впоследствии отключается на один пиксель.

  • Увеличение / уменьшение значения left в инструментах разработчика также показывает некоторыестранные эффекты, когда карта включена, например, при уменьшении на 2 ползунковый элемент сместился на 1 пиксель вправо, а затем назад на 1 пиксель влево.Все нормально, когда карта выбрасывается.

  • Удаление свойства «overflow: hidden» элемента div слайдера исправляет ошибку, но вам придется скрывать элементы слайдера другим способом (см.исправленный jsfiddle).

  • Очень похоже, что последнее изменение свойства left не отражается на отображаемой странице, когда карта включена.

...