Safari ios iframe blank screen on rotate

Mit safari auf einem ios 10.3.2-Gerät verwenden wir iframes, um den Inhalt unserer Website anzuzeigen. Gelegentlich wird jedoch beim Eingeben der Seite das iframe leer geladen, aber bei der Überprüfung werden alle Elemente auf der Seite gerendert - nur unsichtbar. Wenn Sie den Bildschirm auf Querformat drehen oder auf Zoomen klicken, wird der Inhalt sofort angezeigt. Dies scheint nur im Hochformat zu erfolgen.Safari ios iframe blank screen on rotate

Seite:

<div class="external"> 
<iframe width="100%" height="100%" frameborder="0" src=""> 
    <html lang="en" class="iframe"> 
    <head></head> 
    <body>Test Content</body> 
</iframe> 
</div>

Styles:

.Externes:

-webkit-font-smoothing: antialiased; 
-webkit-overflow-scrolling: touch; 
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
-webkit-text-size-adjust: none; 
-webkit-touch-callout: none; 
-webkit-user-select: none; 
bottom: 64px; 
box-sizing: border-box; 
display: flex; 
flex-basis: 0px; 
flex-direction: column; 
flex-grow: 1; 
flex-shrink: 1; 
height: 410px; 
left: 0px; 
max-width: 100%; 
overflow-x: auto; 
overflow-y: auto; 
padding-bottom: 0px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 0px; 
position: absolute; 
right: 0px; 
top: 54px; 
width: 410px; 
word-wrap: normal; 
z-index: 0;

iframe:

-webkit-font-smoothing: antialiased; 
-webkit-overflow-scrolling: auto; 
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
-webkit-text-size-adjust: none; 
-webkit-touch-callout: none; 
-webkit-user-select: none; 
box-sizing: border-box; 
display: block; 
height: 410px; 
margin-bottom: 0px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 0px; 
width: 410px; 
word-wrap: normal;

html.iframe:

-webkit-locale: en; 
-webkit-overflow-scrolling: auto; 
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
-webkit-text-size-adjust: 100%; 
background-color: rgba(0, 0, 0, 0); 
background-image: none; 
background-repeat: no-repeat; 
background-size: cover; 
box-sizing: border-box; 
display: block; 
height: 410px; 
margin-bottom: 0px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 0px; 
width: 410px;

html.iframe Körper

-webkit-overflow-scrolling: auto; 
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
-webkit-text-size-adjust: 100%; 
background-color: rgba(0, 0, 0, 0); 
background-image: none; 
background-repeat: no-repeat; 
background-size: cover; 
box-sizing: border-box; 
color: rgb(19, 35, 92); 
display: block; 
height: 410px; 
line-height: 20px; 
margin-bottom: 0px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 0px; 
width: 410px;

einige Versuche unternommen haben um den Behälter gewesen [.Externes] mit der -webkit-Überlauf-Scrolling: touch Attribut und wie die [html.iframe Körper] Möglicherweise müssen die -webkit-transform: translate3d (0,0,0) Attribut zu beheben, aber bis jetzt funktioniert dies nicht (iPad Safari scrolling causes HTML elements to disappear and reappear with a delay) Jede Hilfe wäre willkommen.

Quelle

2017-06-12 Richard

Der Schlüssel ist nicht zu verwenden display: flex.

Quelle

2017-08-24 10:24:15 user866581

Ein wenig mehr Erklärung wäre hilfreich. – showdev

Dies liefert keine Antwort auf die Frage. Sobald Sie genug [Reputation] (https://stackoverflow.com/help/whats-reputation) haben, können Sie [jeden Beitrag kommentieren] (https://stackoverflow.com/help/privileges/comment); Stattdessen [geben Sie Antworten, die keine Klärung durch den Fragesteller erfordern] (https://meta.stackexchange.com/questions/214173/why-doe-i-need-50-reputation-to-comment-what-can- i-do-stattdessen). - [Aus Bewertung] (/ review/low-quality-posts/17132013) – Pavan

Safari ios iframe blank screen on rotate

Antwort

Verwandte Themen