scorrimento iframe su iOS è risolto, ma la visualizzazione della pagina iframe incompleta

Sto cercando di scorrere un iframe su iOS, e ci sono riuscito, è lo scorrimento bene, di riferimento:scorrimento iframe su iOS è risolto, ma la visualizzazione della pagina iframe incompleta

http://home.jejaju.com/play/iframe-scroll.html

http://areaaperta.com/nicescroll/demo.html

MA, tutte le soluzioni hanno un problema: la pagina iframe non è completamente visualizzata ...

Ho provato il mio iphone e ipad, la pagina iframe mostra choppy. enter image description here

qualche idea?

Esempio:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" /> 
    <meta name="viewport" content="width=device-width, user-scalable=no" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script> 
    <script type="text/javascript"> 
    $(function(){ 
     if (/iPhone|iPod|iPad/.test(navigator.userAgent)) 
      $('iframe').wrap(function(){ 
       var $this = $(this); 
       return $('<div />').css({ 
        width: $this.attr('width'), 
        height: $this.attr('height'), 
        overflow: 'scroll', 
        '-webkit-overflow-scrolling': 'touch' 
       }); 
      }); 
    }) 
    </script> 
    <title>Untitled</title> 
</head> 
<body> 
stuff 
<div> 
<iframe src="iframe-scroll-long.html" height="500" width="500"></iframe> 
</div> 
more stuff 
</body> 
</html>

fonte

2013-01-06 Jove

Posso vedere il tuo codice? –

Il mio codice è lo stesso di http://home.jejaju.com/play/iframe-scroll.html, puoi vedere questa pagina su iPad, la pagina di visualizzazione iframe è irregolare, la mia versione iOS è 5.1.1. – Jove

Ok, ma non riesco a visualizzare la fonte, puoi pubblicare il codice da quella pagina web per favore? –

ho trovato una combinazione di div con stile "assoluto" e nicescroll fare choppines fix.

Devi caricare nicescroll nella pagina caricata da iframe. Nello stesso involucro pagina tutti si accontenta di un div (con stile assoluto)

#content { position:absolute; }

carico nicescroll l'utilizzo di contenuti div avvolto.

$(document).ready(function() { 
    $("html").niceScroll("#content"); 
    });

Link alla pagina di prova, in modo da poter controllare il codice: http://areaaperta.com/nicescroll/demo/iframe6.html

Automaticamente, con iOS scorrimento nativo ha utilizzato, in altra piattaforma che hai nicescroll attiva.

Ho un test su iPad con iOS 5.1.

fonte

2013-01-08 20:40:05 InuYaksa

Grazie InuYaksa, è perfetto ora, non più choppine! Grazie !! :) – Jove

Hey InuYaksa, potresti pubblicare la tua soluzione completa? Questo stesso problema mi ha fatto impazzire, ma sembra che mi manchi qualcosa di banale. Sto provando a caricare due iframe su una pagina e sto avendo problemi di scorrimento. – Mohammad

Prova ad aggiungere -webkit-transform:translate3d(0,0,0) allo stile iframe e tutti gli elementi all'interno all'accelerazione hardware vigore - dovrebbe ridurre il choppiness.

In stile di pagina principale:

iframe { -webkit-transform:translate3d(0,0,0); }

e in stile IFRAME:

p { -webkit-transform:translate3d(0,0,0); }

fonte

2013-01-07 03:54:57

Grazie a jc6212, ho provato questo, ma la sminuzzatura è la stessa, nessuna riduzione. – Jove

Ho avuto un'animazione molto discontinua all'interno di un iframe, risolto con questo trucco.Tutto quello che dovevo fare era aggiungerlo all'elemento che si stava animando.Il che ci serviva – Greg

Questa soluzione è un po 'di un hack, ma è testato e funziona bene su iOS:

<div style="width: 760px; height: 500px; overflow: scroll !important;-webkit-overflow-scrolling:touch !important;"> 
    <object type="text/html" data="HTTP://YOURPAGE.URL" style="width:1000px; height:10000px;"> 
    </object>  
</div>

In sostanza, dal momento che lo scorrimento funziona bene in un DIV, si incorpora il codice pagina utilizzando il tag oggetto. Il problema è che, a causa della stessa politica di origine, non è possibile determinare le dimensioni della pagina di destinazione. Ho trovato che l'impostazione di una dimensione di pagina enorme è perfettamente funzionante (nessun ritardo o choppyness notato ... solo spazio vuoto)

È possibile determinare facilmente il sistema operativo del client e aggiungere questo codice solo ai dispositivi iOS.

fonte

2013-07-25 14:12:16 user2619064

Hanno provato iscroll, iframe hack, trucchi css ... niente funziona per combinazione Phonegap + iFrame MA QUESTO! WOW. GRAZIE! – Benny7500

Abbiamo usato questa soluzione per un po ', ma sembra essersi fermata con iOS8. :( – althaus

Ho trovato questo problema con il contenuto relativamente posizionato all'interno del frame. Eliminare questo comportamento durante la rimozione di position: relative;

fonte

2013-10-29 11:33:21

scorrimento iframe su iOS è risolto, ma la visualizzazione della pagina iframe incompleta

risposta

Problemi correlati