Problemas con el evento .scroll() de jQuery sobre IE?

Programación > CSS

Como siempre! nuestro “amigo” Internet Explorer (IE) dándonos problemas.

Algo tan simple como tener un DIV con un evento “scroll” de jQuery no funciona para IE.

Pongamos un conjunto basico de elementos
<div id="pages"></div>

en CSS algo como:
#pages { overflow: auto; position: absolute; height: 290px; width: 100%;}

y en un script algo como:
$("#content #pages").scroll(function () { //code});

nos dará como resultado que funciona en todos los Navegadores menos IE. La conclusión que hemos sacado luego de algunas pruebas es que IE hace que el evento solo responda sobre las áreas donde exista algún elemento visual (traduzcase como alguna propiedad que realmente lo obligue a renderizar algo porque un DIV vacío no renderiza nada visual).

Si dentro del DIV ponemos algún elemento visual o sencillamente le asignamos un color pues el evento comienza responder. Pero si no puedo poner un color de fondo porque no va con el diseño de la página pues que hago?

Una solución simple que se me ocurrió es ponerle como background una imagen transparente de 1 pixel de ancho por alto y que se repita. De esta forma consigo todo lo que quiero:
- Que el DIV continúe sin “contenido visual” como lo necesito.
- Que IE lo asuma como que posee “contenido visual” y responda al evento en toda el área que abarca el DIV.

El CSS quedaría en algo como:
#pages {
overflow: auto; position: absolute; height: 290px; width: 100%;
background: url(../images/desktop/common/scroll-pages-bg-fix-to-ie.png) repeat;
}

Lo mismo pudiera aplicarse para los demás eventos de scroll como “mousewheel” aunque no le he probado.

Problemas con el tamaño de los fonts cuando cambia la orientación de su Navegador móvil?

Programación > Móviles

Después de pasar varias horas en busca de un supuesto error en el HTML o el CSS de un proyecto, de frustrarme hasta que te dan ganas de tirar la laptop contra el piso y de que apareció un amigo que encontró la solución mágica del problema buscando en Internet pues creo que merece la pena dejarlo por escrito a ver si otros pobres del mundo no sufren lo que me ha tocado hoy.

El proyecto es bastante complejo y quizás eso hacía ver el problema como consecuencia de algún error interno. Pero el problema era tan simple como que un DIV mostrando simplemente texto no era capaz de mostrarlo de forma correcta en ambas vista u orientaciones, Portrait y Landscape, cuando íbamos de la primera a la segunda y regresabamos de nuevo a Portrait.

Era para volverse loco. Revise varias veces los estilos para ambas vistas, cambie todas y cada una de las unidades de medida del FONT-SIZE de “pt” a “px” y todo en vano. Lo más frustrante es que por momentos algún cambio hacía que se visualizara correctamente y después todo se desvanecía. Por otro lado en la PC todo funcionaba a las mil maravilla y evidentemente en el móvil todo se hace más difícil de depurar.

Para no darle más vueltas al asunto pues ya he perdido suficiente tiempo por hoy, jeje, la solución radica en poner en el CSS la siguiente línea de código:

-webkit-text-size-adjust: none;

Asi de sencillo??, pues si. Es una de las tantas magias oscuras que posee WebKIT. Este problema puede tenerlo cualquier WEB que se visualice en un dispositivo móvil con algún Navegador basado en webkit, como Safari y Chrome. En mi caso estaba probando sobre un iPhone5 y un tablet Nexus7 de Google.

Creo que a partir de hoy vendre a este Blog a copiarla y pegarla en cada proyecto nuevo que comience.