miércoles, 19 de diciembre de 2012

Error de jCarousel al hacer zoom en Chrome


jQuery jCarousel truena al hacer zoom en Chrome.

Existe un problema con el plugin jCarousel de jQuery que ocurre cuando se realiza un zoom diferente al 100% en una página utilzando Google Chrome como navegador.

Para replicar el problema se tiene que ver el jCarousel en acción dentro de Google Chrome y hacer un zoom a la página diferente al 100%.
Los elementos del carrusel se descuadran cuando el zoom es distinto del 100%, y esto produce que se vean cortadas las imágenes al estar avanzando o retrocediendo

Este problema sólo se presenta con Chrome y por lo que leí se debe a que el plugin utiliza en varias ocasiones el método this.list.css(this.lt) el cual usa window.getComputedStyle que en Chrome toma en cuenta el zoom actual de la página.

Solución.

Lo que hay que hacer es modificar el archivo jquery.jcarousel.min.js o donde tengan el plugin y quitar el uso de este método y a su vez utilizar this.list[0].style[this.lt]

Es decir, reemplazar todas las ocurrencias de this.list.css(this.lt) por this.list[0].style[this.lt] dentro del plugin jCarousel.

Osea un replace desde el editor de código que utilices. Son como seis ocurrencias que hay que reemplazar.

Así debe quedar



Con esto se soluciona el problema y el carrusel de imágenes se observa correctamente desde Chrome al
hacer zoom sobre la página.

De aquí tomé la idea principal: https://github.com/jsor/jcarousel/issues/85

Espero les sirva.