问题描述
在ios 10.3.2设备上使用野生动物园，我们正在使用iframe在我们的网站上显示内容.但是，偶尔在进入页面时，iframe会加载空白，但经过检查，所有元素都会呈现在页面上-只是不可见.将屏幕旋转为横向或缩放视图会使内容立即显示，这似乎只在纵向模式下发生.
Using safari on an ios 10.3.2 device, we are using iframes to display the content on our site. However, occasionally when entering the page the iframe loads blank, but on inspection all the elements are rendered on the page - just invisible. Rotating the screen to landscape or pinch zooming causes the content to appear instantly, this only seems to occur in portrait mode.
页面:
<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:
.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:
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正文
html.iframe body
-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-overflow-scrolling:触摸属性，以及[html.iframe正文]可能需要-webkit-transform:translate3d(0,0,0)属性进行修复，但到目前为止，此方法不起作用( iPad Safari滚动导致HTML元素消失和重新出现)任何帮助将不胜感激.
Some attempts have been around the container [.external] having the-webkit-overflow-scrolling: touch attribute and how the [html.iframe body] might need the -webkit-transform: translate3d(0,0,0) attribute to fix, but so far this isn't working (iPad Safari scrolling causes HTML elements to disappear and reappear with a delay)Any help would be appreciated.
推荐答案
关键是不要使用display: flex.
这篇关于Safari ios iframe旋转空白屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！