2012-03-21 10 views
6

Estoy buscando correcta manera de asegurar que el contenido revelado dinámicamente sea visible después de desplazarse en un iframe en ipad/iOS5.iframe en iOS (iPad), problema de recorte de contenido

Oh Iframes y iPad: qué maravillosa vieja castaña eres. Sé que:

  • IPAD se expande marcos flotantes a la altura total del contenido dentro de ella (casi como que estaba utilizando "seamless" propiedad de HTML5, pero no del todo, ya que no hereda estilos o eventos de los padres) . Bizarro, molesto para muchos, pero cierto.
  • <iframe height="100%"> es por lo tanto inútil, ya que el tamaño de su contenido no al contenedor
  • tengo que envolver mi iframe en un div - a la

    <div id="wrapper" style="-webkit-overflow-scrolling:touch;overflow:auto;"> 
    <iframe width="100%" height="100%" src="about"blank"></iframe> 
    </div> 
    
  • o bien introducir algún trickery para fijar el rollo posición del marco (que creo que se basa en trucos mencionados en this article)

Mi problema es que el contenido que es dinámicamente sh propia dentro del cuerpo del iframe (p. las pestañas jquery, acordeón, etc.) pueden hacer que el navegador recorte el contenido en la extensión de visualización de la página.

E.g. si mis "pestañas" están en la parte inferior de la ventana visible dentro del marco flotante y realizo un desplazamiento de dos dedos (o implemento el desplazamiento de un dedo), luego de que ese contenido se despliega a la vista, parte del contenido que fue previamente no dibujado permanece sin dibujar. Al hacer clic en una segunda pestaña/atrás nuevamente, el contenido aparece como si la página no dibujara contenido fuera de la pantalla. Después de esto, si vuelvo a desplazarme hacia la parte superior de la página, el contenido no se dibuja para el inicio de la página (que anteriormente estaba visible). Desplazar la página hacia arriba y hacia abajo varias veces con un desplazamiento con dos dedos resuelve el problema.

Había leído this article que indicaban que el problema estaba solucionado. Pero no parece estar completamente arreglado; y aún no soluciona el problema, ya que tiene que ajustar su iframe en un div y colocar barras de desplazamiento en ese div, los navegadores de escritorio pueden mostrar una barra de desplazamiento doble dependiendo de cómo interpretan overflow:auto.

p.s. Estoy usando la página repetitiva HTML5 tanto dentro como fuera del iframe, con la configuración correcta de la metaportería.

+0

¿Encontró alguna solución mientras tanto? Enfrentando el mismo problema en mi plataforma, estoy trabajando en ... – YvesR

+2

Encontré que intentaba usar la etiqueta compatible con XHTML1.1 en lugar de