Safari ios iframe空白屏幕旋轉

在ios 10.3.2設備上使用Safari瀏覽器，我們使用iframe在我們的網站上顯示內容。但是，偶爾在進入頁面時，iframe加載空白，但在檢查時，所有元素都呈現在頁面上 - 只是看不見。將屏幕旋轉到橫向或縮放縮放會導致內容即時顯示，這似乎只發生在縱向模式中。Safari ios iframe空白屏幕旋轉

頁：

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

樣式：

.external：

-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體

-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;

一些嘗試已經在容器周圍[.external]具有 -webkit-溢出滾動：觸摸屬性以及如何[html.iframe機構]可能需要-webkit-transform：translate3d（0,0,0）屬性來修復，但到目前爲止這是行不通的（iPad Safari scrolling causes HTML elements to disappear and reappear with a delay）任何幫助，將不勝感激。

來源

2017-06-12 Richard

關鍵是不要使用display: flex。

來源

2017-08-24 10:24:15 user866581

多一點解釋會有幫助。 – showdev

這不提供問題的答案。一旦你有足夠的[聲譽]（https://stackoverflow.com/help/whats-reputation），你將可以[對任何帖子發表評論]（https://stackoverflow.com/help/privileges/comment）;相反，[提供不需要提問者澄清的答案]（https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can- I-DO-代替）。 - [來自評論]（/ review/low-quality-posts/17132013） – Pavan

Safari ios iframe空白屏幕旋轉

回答

相關問題