JQuery Faciling Animation of Window Roll in Firefox (Bug ou meu mal?)

Question

O EXEMPLO
Em primeiro lugar, aqui está meu código e problema:
http://www.nathanstpierre.com/mbx/showoff.html

O PROBLEMA
Então, o que estou vendo é quando você clica nos botões à esquerda, a janela rola para o cabeçalho apropriado. Em todos os navegadores, mas Firefox (incluindo ... ou seja, suspiro) Isso é muito suave. No entanto, se você reduzir a altura da janela, ela ficará suave em todos os computadores. Eu já tentei isso em vários computadores e no IE 7-8, Google Chrome, Safari e Firefox 3.5. Eu eliminei todo o gráfico e a cor da página, então esses não são o problema. Eu me livrei da barra lateral que o segue, não é isso.

A TEORIA
Eu acho que o plug -in de facilidade de jQuery calcula a distância que você precisa ir e, em seguida, divide o número de pixels necessário para mover por unidade de duração especificada (digamos 300 pixels em 30 milissegundos, então 10px/ms). Todos os outros navegadores parecem ser capazes de fazer disso uma transição suave, mas talvez a granularidade fornecida pelo evento de rolagem da janela não seja compactada o suficiente para o Firefox fazer com que isso pareça suave? Ou talvez eu esteja usando o plug -in de flexão errado ou as configurações erradas.

O CÓDIGO

$("#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 LÓGICA

Adicione um ouvinte de eventos a cada uma tag A no Sidenav OnClick. Isso obterá o deslocamento (). Top do elemento no documento com o mesmo ID que o atributo href desse link e, em seguida, anime -se do atual scroltop para o deslocamento (). Topo desse elemento. A lógica é sólida e funciona bem em todos os navegadores, exceto o Firefox ... até onde eu sei.

O apelo

O que estou fazendo errado? Isso é um inseto?

Obrigado!

A ATUALIZAÇÃO

Bem, eu não posso, em boa consciência votos.

A questão parece ser a maneira como o Firefox a) torna a transparência e b) lida com eventos de rolagem. Potencialmente, com poder de processador suficiente, isso não é um problema, mas o que me deixa triste é que o IE (de todos os navegadores) é capaz de renderizar essa multa em hardware inferior. Vou abordar Mozilla com o problema e ver se eles têm algo a dizer sobre isso.

Para edificação extra, o seguinte é fornecido sem nenhum custo:

Com transparência
Sem transparência

EDIT: Portanto, a pergunta foi respondida, mas agora não posso escolher. Alguém sabe o que há com isso?

Atualização finalTempos suficientes haviam passado para que eles me deixassem ter a recompensa de volta, então escolhi a resposta que estava correta. Parece a Shadow Box e alguns outros efeitos causam alguns problemas de rolagem no Firefox por causa da maneira como eles renderizam. FF 4.0 + lida com isso melhor, mas alguns computadores ainda têm problemas. Este é um ótimo alerta para as pessoas que implementam o CSS3: teste a interação em todos os navegadores e veja se os custos de desempenho são justificáveis.

Answer 1

O fraco desempenho parece ser causado pelo -moz-box-shadow Propriedade, se você remover alguma declaração desta propriedade (ou desativá -las com Firebug), a animação de rolagem é muito mais suave.

Answer 2

Por favor, tente o jQuery 1.4. Isso parece ser muito mais rápido, depois jQuery 1.3.2.

Se você precisar depurar esse tipo de coisa, coloque os arquivos JS não compactados no seu código e use o Firebug com seu perfil, para perfilar as funções.

Answer 3

Sua página é um pouco pesada com os dois fundos (um sendo um .png transparente ..)

O problema é com o Firefox e/ou você lidando com a animação. Verifique a opção de rolagem suave do Firefox ( Ferramentas -> Opções -> Avançado -> Geral -> Use rolagem suave ). Pode ser o motivo se for marcado ...

Answer 4

Sempre que tentei um efeito semelhante, usei o Scrollto. Talvez isso ajude

Plugin ScrollTo

Answer 5

Eu tive o mesmo problema com o FF 3.5 - definitivamente parece um problema de renderização. Se você tentar o novo 3.6, provavelmente ficará bem.

Eu estava tendo problemas com o Slider 2.0 de Doherty BTW.

Cumprimentos

Andrej