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) 任何帮助,将不胜感激。
答
关键是不要使用display: flex
。
多一点解释会有帮助。 – showdev
这不提供问题的答案。一旦你有足够的[声誉](https://*.com/help/whats-reputation),你将可以[对任何帖子发表评论](https://*.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