El problema de scroll de los iframes en iOS

El problema de scroll de los iframes en iOS

Los iframes y algunos DIVs que usan scroll tienen serios problemas con las nuevas versiones de iOS (desde la versión 8 en adelante). En este artículo veremos una forma sencilla de solucionarlos utilizando CSS.

Un problema es que los iframes no tienen ningun tipo de scroll en iOS. Otro es que los elementos que tienen la propiedad scroll:auto no muestran la animación característica de los móviles o momentum scroll y se mueven de forma muy torpe.

Normalmente el problema se presenta en Safari Mobile (la versión de Safari utilizada por iPods, iPhones e iPads) y se presenta en dos casos en especial.

El primero es cuando tenemos uniframe:

Y el segundo cuando tenemos un elemento conscroll:

Sé que es una mala idea colocar el estilo directamente en el código HTML, pero este es solo un ejemplo ilustrativo.

Solución utilizando CSS

La solución es la de utilizar la propiedad -webkit-overflow-scrolling (1) que fue creada justamente para que los dispositivos touch utilicen el momentum scroll en un elemento.

La solución en CSS para el primer caso es englobar el iframe en un div y darle el siguiente estilo:

Esta solución no esta hecha a prueba de balas, sobre todo teniendo en cuenta los constantes cambios y decisiones que toma Apple para el renderizado de los sitios web. Es por eso que probablemente sea mas interesante que pienses en pasar a una solución JavaScript que será mucho mas robusta.

Links adicionales:

(1) Descripción de la propiedad -webkit-overflow-scrolling en el sitio de Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling