问题
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.
Page:
<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:
.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 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;
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.
回答1:
the key is not to use display: flex.
来源：https://stackoverflow.com/questions/44503618/safari-ios-iframe-blank-screen-on-rotate