La propiedad fixed y los problemas con Firefox

Aunque pensaba publicarlo como consejo “extra” a la hora de hacer plantillas creo que puede interesar a más de uno que lo explique un poco más extenso que un simple consejo…

El caso es el siguiente: El motor de renderizado de Mozilla/Firefox siempre ha funcionado fatal con la propiedad fixed en background.

Al hacer scroll (especialmente notable si eres de los que usa las teclas para bajar el texto poco a poco) podemos empezar a notar lentitud, si tenemos un indicador de CPU a mano podremos observar que al hacer scroll empieza a aumentar el consumo de CPU.

Para hacer esto solamente tenemos que usar un fondo de pantalla con la propiedad fixed, por ejemplo:

 background: url( /images/imagen.a.mostrar.jpg ) fixed;

Quisiera dar un ejemplo en vivo (Javier ya que comentas que estás optimizando la plantilla, te usaré de conejillo de indias):

Instrucciones

1. Tener un widget o forma de ver el consumo (en %) de CPU.
2. Entrar en el blog de Javier y hacer scroll: ver como sube.
3. Crear un fichero “style.css” que contenga: html { background : url('http://www.esta2.com/wp-content/themes/esta2/images/bg.gif'); }.
4. Aplicarlo al blog de Javier por ejemplo con Web Developer le das a la pieza verde que pone “CSS” y luego a “Add User Style sheet” para elegir el fichero style.css.

El efecto es inmediato: Podemos ver como el blog de Javier se ve exactamente igual (realmente lo único que cambiamos es quitar de su CSS el parámetro “fixed”) y el scroll se hace suave y no consume recursos…

Este problema se hace especialmente pesado de soportar cuando lo que está fijado son fondos en PNG muy cargados.

4 Comentarios (feed)

1. Scailay nos comenta:
   

   Pero ese problema se soluciona localmente, no para todos los usuarios, con lo cual estamos en lo mismo…

   El problema supongo que depende también del peso de la imagen, ¿no? En mi caso también utilizo la propiedad fixed y aún con Firefox apenas noto ralentización. En cambio en otros blogs se nota muchísimo (siempre me había preguntado por qué era).

   Lunes, 13 de Noviembre/2006 @ 22:34

2. Armonth nos comenta:
   

   El problema es al usar background + “fixed” rollo:

   background: url( imagen.jpg ) fixed;

   background-attachment: fixed;

   Pero sí, depende también del tamaño (especialmente dañino el problema con PNGs con canal alfa y/o pesados). Tú página solamente tiene una imagen png de 8×800 y de un solo color (aparentemente, seguramente sea un degradado pero no me he parado a fijarme) y la ralentización casi no se nota (eso sí: la cpu aumenta)…

   Sobre el problema, lo arreglamos “localmente” para ver “en vivo” el problema y la solución a aplicar, obviamente la solución final (sin “trucos”) pasa porque el webmaster haga las correcciones en el CSS.

   Lunes, 13 de Noviembre/2006 @ 23:15

3. javier nos comenta:
   

   ahi va mi madreeee…. no me podía imaginar que era por algo así, entonces ahora quitaré el fixed

   Lunes, 13 de Noviembre/2006 @ 23:44

4. Dario nos comenta:
   

   No habia tenido en cuenta el attachment para agregar la propiedad fixed, y FireFox me trajo dolores de cabeza con eso (A demas de algunos codigos JavaScript que ya venia usando sin problemas en MSIE =S), pero bueno, asi es el webmastering…lidiar con los navegadores y sus “pretensiones” ja!…weno, cuando termine de editar la plantilla tal vez me de una pasada para mostrarles el resultado (Espero que sea bueno XD)

   Miércoles, 21 de Marzo/2007 @ 9:06

Comentarios cerrados