2012-03-21 14 views
6

Sto cercando il corretto modo per assicurare che il contenuto rivelato dinamicamente sia visibile dopo averlo spostato in un iframe su ipad/iOS5.iframe su iOS (iPad) tema di ritaglio contenuto

Oh Iframes e iPad: che meraviglioso vecchio castagno sei. So che:

  • iPad espande iframe per l'intera altezza del contenuto al suo interno (quasi come se stesse usando "seamless" proprietà di HTML5, ma non del tutto, poiché non eredita stili o gli eventi dal genitore) . Bizzarro, fastidioso per molti, ma vero.
  • <iframe height="100%"> è quindi inutile in quanto le dimensioni per il suo contenuto non al contenitore
  • Ho bisogno di avvolgere la mia iframe in un div - alla

    <div id="wrapper" style="-webkit-overflow-scrolling:touch;overflow:auto;"> 
    <iframe width="100%" height="100%" src="about"blank"></iframe> 
    </div> 
    
  • oppure introdurre qualche trickery per impostare il rotolo posizione del telaio (che credo si basa su trucchi di cui this article)

il mio problema è che il contenuto che è dinamicamente sh proprio all'interno del corpo dell'iframe (ad es. schede jquery, fisarmonica, ecc.) possono causare il ritaglio del contenuto del browser nella dimensione di visualizzazione della pagina.

E.g. se le mie "schede" si trovano nella parte inferiore del viewport visibile all'interno dell'iframe ed eseguo uno scorrimento con due dita (o implementa lo scroll one-key con un dito), dopo che il contenuto è stato spostato nella visualizzazione, parte del suo contenuto precedentemente non disegnato rimane non sparpagliato. Facendo clic su una seconda scheda/sul retro, il contenuto appare come se la pagina non disegnasse il contenuto fuori schermo. Dopodiché, se si scorre indietro fino all'inizio della pagina, il contenuto non è disegnato per l'inizio della pagina (che era visibile in precedenza). Scorrere la pagina verso l'alto e verso il basso alcune volte con lo scorrimento con due dita risolve il problema.

Avevo letto this article che indicava che il problema era stato risolto. Ma non sembra essere completamente risolto; e ancora non risolve il problema che, visto che devi avvolgere il tuo iframe in un div e mettere barre di scorrimento su quel div, i browser desktop possono mostrare una barra di scorrimento doppia a seconda di come interpretano overflow:auto.

p.s. Sto usando la pagina di HTMLplatteria sia all'interno che all'esterno dell'iframe, con le corrette impostazioni di meta vista.

+0

Hai trovato una soluzione nel frattempo? Sto affrontando lo stesso problema sulla mia piattaforma su cui sto lavorando ... – YvesR

+2

Ho trovato che prova l'uso del tag conforme XHTML1.1 invece di uno