jQuery facilitando l'animazione di finestra di scorrimento in Firefox (bug o il mio cattivo?)

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

Domanda

L'esempio
In primo luogo, ecco il mio codice e problema:
http://www.nathanstpierre.com/MBX/showoff.html

IL PROBLEMA
Quindi quello che sto vedendo è quando si fa clic sui pulsanti a sinistra, la finestra scorre verso la direzione appropriata. In tutti i browser, ma Firefox (compresa ... IE sussulto ) questo è molto liscia. Tuttavia, se si riduce l'altezza della finestra, diventa liscia su tutti i computer. Ho già provato questo su più computer e su IE 7-8, Google Chrome, Safari e Firefox 3.5. Ho eliminato ogni bit di grafica e del colore sulla pagina, in modo da coloro che non sono il problema. Ho deciso di eliminare la barra laterale che ti segue, non è questo.

LA TEORIA
Credo che l'allentamento plugin per jQuery calcola la distanza che si sta bisogno di andare, e poi divide il numero di pixel di cui ha bisogno di muoversi per unità di durata determinata (ad esempio 300 pixel oltre 30 millisecondi, quindi 10px / MS). Ogni altro browser sembra essere in grado di fare questo una transizione graduale, ma forse la granularità fornita dall'evento finestra di scorrimento non è compresso abbastanza per Firefox per rendere questo apparire liscio? O forse sto usando il plugin allentamento sbagliato, o le impostazioni sbagliate.

il codice 

$("#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;
      });

LA LOGICA

Aggiungi un listener di eventi per ciascuna un cartello alla sidenav onClick. Questo otterrà l'offset (). Dall'alto dell'elemento nel documento con lo stesso ID come attributo href di tale collegamento, e quindi animate dal scrollTop corrente all'offset (). Oltre a questo elemento. La logica è sana e funziona senza problemi in tutti i browser Firefox TRANNE ... per quanto posso dire.

IL MEZZO

Che cosa sto facendo di sbagliato? è un insetto?

Grazie!

L'AGGIORNAMENTO

Beh non posso in coscienza scegliere una delle risposte qui presentati, come nessuno di loro hanno effettivamente dato una risoluzione al problema, quindi se si sta seguendo questo scegli il tuo preferito e la bontà andrò a quello con il massimo dei voti.

Il problema sembra essere il modo in cui Firefox a) rende la trasparenza e b) si occupa di eventi di scorrimento. Potenzialmente con potenza del processore abbastanza questo è un non-problema, ma ciò che mi rende triste è che IE (di tutti i browser) è in grado di rendere questo bel su hardware inferiore. Mi avvicino Mozilla con la questione e vedere se hanno qualcosa da dire a riguardo.

Per l'edificazione in più, i seguenti sono forniti senza alcun costo:

Con Trasparenza
senza trasparenza

EDIT: Quindi la domanda è stato risposto, ma ora non posso sceglierlo. Qualcuno sa cosa succede con questo?

AGGIORNAMENTO FINALE Abbastanza tempo era passato che mi permetta di avere la bontà di nuovo, così ho scelto la risposta che era corretta. Sembra box-shadow e pochi altri effetti causare alcuni problemi di scorrimento in Firefox per il loro modo di rendering. FF 4.0 + gestisce questo meglio, ma alcuni computer hanno ancora problemi. Questo è un grande testa a testa per le persone di attuazione CSS3:. Testare l'interazione in tutti i browser e vedere se i costi delle prestazioni sono giustificabili

È stato utile?

Soluzione

Lo scarso rendimento sembra essere causato dalla struttura -moz-box-shadow, se si rimuove eventuali dichiarazioni di questa struttura (o disattivare con Firebug) l'animazione di scorrimento è molto più agevole.

Altri suggerimenti

Si prega di provare jQuery 1.4. Che sembra essere il tanto più veloce, poi jQuery 1.3.2.

Se avete bisogno di eseguire il debug di questo genere di cose, mettere i file JS non compressi nel codice e utilizzare Firebug con il suo profilo, al profilo delle funzioni.

pagina è un po 'pesante con i due sfondi (uno è un .png trasparente ..)

Il problema è con Firefox e / o macchine di movimentazione l'animazione. Selezionare l'opzione scorrimento continuo di Firefox ( Strumenti -> Opzioni -> Avanzate -> Generale -> Usa scorrimento ). Potrebbe essere la ragione, se è spuntata fuori ...

Ogni volta che ho tentato un effetto simile ho usato scrollTo. forse che aiuterà

scrollTo Plugin

Ho avuto lo stesso problema con FF 3.5 - sembra decisamente come un problema di rendering. Se si tenta Nuovi 3.6 sarà probabilmente ok.

ho avuto problemi con la coda cursore di Doherty 2.0 btw.

Saluti

Andrej

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top