jQuery ослабляет анимацию прокрутки окна в Firefox (ошибка или я виноват?)

StackOverflow https://stackoverflow.com/questions/2097655

Вопрос

ПРИМЕР
Прежде всего, вот мой код и проблема:
http://www.nathanstpierre.com/MBX/showoff.html

ПРОБЛЕМА
Итак, что я вижу, так это то, что когда вы нажимаете кнопки слева, окно прокручивается до соответствующего заголовка.В любом браузере, кроме Firefox (включая...IE ахнуть) это очень плавно.Однако, если вы уменьшите высоту окна, оно станет плавным на всех компьютерах.Я уже пробовал это на нескольких компьютерах и в IE 7-8, Google Chrome, Safari и Firefox 3.5.Я устранил все графические элементы и цвета на странице, так что проблема не в них.Я избавился от боковой панели, которая следует за вами, это не то.

ТЕОРИЯ
Я думаю, что плагин jQuery easing вычисляет расстояние, которое вам нужно пройти, а затем делит количество пикселей, которое ему необходимо переместить, на единицу указанной продолжительности (скажем, 300 пикселей за 30 миллисекунд, то есть 10 пикселей в мс).Кажется, что любой другой браузер способен сделать этот плавный переход, но, возможно, детализация, обеспечиваемая событием прокрутки окна, недостаточно сжата для Firefox, чтобы сделать это плавным?Или, может быть, я использую неправильный плагин для облегчения или неправильные настройки.

КОД

$("#sidenav a").click(function () {
        $("#sidenav a").animate({'color':'#6d6d6d'},{"duration":400});
        $(this).animate({"color":"#fff"},{"duration":400});
        clicktarget=$(this).attr("href");
        $("html, body").animate({scrollTop: $(clicktarget).offset().top},{"duration":300,"easing":"easeout"});
        return false;
      });

ЛОГИКА

Добавьте прослушиватель событий к каждому тегу a в sidenav onClick.Это позволит получить offset().top элемента в документе с тем же идентификатором, что и атрибут href этой ссылки, а затем анимировать текущую вершину прокрутки до offset().top этого элемента.Логика здравая и работает бесперебойно в любом браузере, КРОМЕ Firefox...насколько я могу судить.

МОЛЬБА

Что я делаю не так?Это ошибка?

Спасибо!

ОБНОВЛЕНИЕ

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

Проблема, по-видимому, заключается в том, как Firefox а) отображает прозрачность и б) обрабатывает события прокрутки.Потенциально при достаточной мощности процессора это не проблема, но что меня огорчает, так это то, что IE (из всех браузеров) способен отлично отображать это на более низком оборудовании.Я обращусь к Mozilla с этой проблемой и посмотрю, есть ли у них что сказать по этому поводу.

Для дополнительного ознакомления бесплатно предоставляются следующие услуги:

С Прозрачностью
Без Прозрачности

Редактировать:Итак, на вопрос был дан ответ, но теперь я не могу его выбрать.Кто-нибудь знает, что с этим не так?

ОКОНЧАТЕЛЬНОЕ ОБНОВЛЕНИЕ Прошло достаточно времени, чтобы мне вернули награду, поэтому я выбрал правильный ответ.Похоже, что box-shadow и несколько других эффектов вызывают некоторые проблемы с прокруткой в Firefox из-за способа их рендеринга.FF 4.0 + справляется с этим лучше, но на некоторых компьютерах все еще возникают проблемы.Это отличный совет для людей, внедряющих CSS3:протестируйте взаимодействие во всех браузерах и посмотрите, оправданы ли затраты на производительность.

Это было полезно?

Решение

Низкая производительность, по-видимому, вызвана -moz-box-shadow свойство, если вы удалите все объявления этого свойства (или отключите их с помощью Firebug), анимация прокрутки станет намного более плавной.

Другие советы

Пожалуйста, попробуйте jQuery 1.4.Это кажется намного быстрее, чем jQuery 1.3.2.

Если вам нужно отладить подобные вещи, поместите несжатые js-файлы в свой код и используйте Firebug с его профилем для профилирования функций.

Ваша страница немного перегружена двумя фонами (один из которых прозрачный .png ..)

Проблема связана с firefox и / или вашей машиной, обрабатывающей анимацию.Проверьте опцию плавной прокрутки в Firefox ( Инструменты -> Параметры -> Дополнительно -> Общие -> Использовать плавную прокрутку ).Это может быть причиной, если он отмечен галочкой...

всякий раз, когда я пытался добиться подобного эффекта, я использовал scrollTo .может быть, это поможет

Плагин scrollTo

У меня была такая же проблема с FF 3.5 - определенно похоже на проблему рендеринга.Если вы попробуете новый вариант 3.6, то, вероятно, все будет в порядке.

Кстати, у меня возникли проблемы с coda slider 2.0 от Доэрти.

С уважением

Андрей

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top