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空白屏幕旋转

回答

相关问题