EL EJEMPLO
En primer lugar, aquí está mi código y problema (bug o mi mal?):
http://www.nathanstpierre.com/MBX/showoff.htmljQuery aliviar la animación de desplazamiento ventana en Firefox
EL PROBLEMA
Así que lo que Estoy viendo que cuando haces clic en los botones de la izquierda, la ventana se desplaza al título apropiado. En todos los navegadores excepto Firefox (incluido ... IE gasp), esto es muy sencillo. Sin embargo, si reduce la altura de la ventana, se vuelve uniforme en todas las computadoras. Ya he probado esto en varias computadoras y en IE 7-8, Google Chrome, Safari y Firefox 3.5. Eliminé todo el gráfico y el color de la página, así que esos no son el problema. Me he deshecho de la barra lateral que te sigue, eso no es todo.
LA TEORÍA
creo que el plugin de jQuery aliviar calcula la distancia a la que está necesitando ir y, a continuación, divide el número de píxeles que necesita moverse por unidad de tiempo determinado (digamos más de 300 píxeles 30 milisegundos, entonces 10px/ms). Todos los demás navegadores parecen ser capaces de hacer de esto una transición fluida, pero tal vez la granularidad proporcionada por el evento de desplazamiento de la ventana no está lo suficientemente comprimida como para que Firefox lo haga parecer liso. O tal vez estoy usando el plugin easing incorrecto, o la configuración incorrecta.
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;
});
LA LÓGICA
Añadir un detector de eventos a cada una etiqueta en la sidenav onClick. Esto obtendrá el desplazamiento(), la parte superior del elemento en el documento con el mismo ID que el atributo href de ese enlace, y luego animará desde el scrollTop actual hasta el desplazamiento(), parte superior de ese elemento. La lógica es sólida y funciona sin problemas en todos los navegadores, EXCEPTO Firefox ... hasta donde yo sé.
Sobre el motivo
¿Qué estoy haciendo mal? ¿Es esto un error?
Gracias!
LA ACTUALIZACIÓN
Bueno, no puedo en buena conciencia elegir cualquiera de las respuestas que aquí se presentan, ya que ninguno de ellos realmente han dado una solución al problema, por lo que si usted está siguiendo este recoger su favorito y la recompensa irá a la que tenga los votos más altos.
El problema parece ser la forma en que Firefox a) proporciona transparencia yb) se ocupa de los eventos de desplazamiento. Potencialmente, con suficiente potencia de procesador, esto no es un problema, pero lo que me entristece es que IE (de todos los navegadores) es capaz de reproducir bien en un hardware inferior. Me acercaré a Mozilla con el problema y veré si tienen algo que decir al respecto.
para edificación adicional, se proporcionan los siguientes sin cargo:
With Transparency
Without Transparency
EDIT: Entonces, la pregunta ha sido contestada, pero ahora no puede elegirlo. Alguien sabe qué pasa con eso?
INFORME FINAL DE ACTUALIZACIÓN Había pasado tiempo suficiente que me dejaron tener la generosidad hacia atrás, por lo que optó por la respuesta que era correcto. Parece que la sombra de la caja y algunos otros efectos causan algunos problemas de desplazamiento en Firefox debido a la forma en que se representan. FF 4.0 + maneja esto mejor, pero algunas computadoras todavía tienen problemas. Este es un gran aviso para las personas que implementan CSS3: pruebe la interacción en todos los navegadores y vea si los costos de rendimiento son justificables.
funciona bien en Firefox 3.6 RC2 Mac OS X –
@Paolo: Hmm tal vez se fijó en 3,6, voy a comprobar que el próximo. Gracias por el aviso. – NateDSaint
@Paolo: No, parece que sigue siendo un problema. Para ver un ejemplo de lo que quiero decir, reduzca la ventana a unos 400 píxeles de alto, y luego presione los botones para ver una comparación. En realidad, no es gran cosa, pero soy quisquilloso y creo que he descubierto un error potencial con la forma en que jquery se anima o la forma en que Firefox entiende esa animación. – NateDSaint