Question

在ios 10.3.2设备上使用safari，我们正在使用iframe在我们的网站上显示内容。但是，偶尔在进入页面时，iframe会加载空白，但在检查时，所有元素都会在页面上呈现 - 只是不可见。将屏幕旋转到横向或缩放缩放会导致内容立即显示，这似乎只在纵向模式下出现。

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>

样式：

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

有一些尝试围绕容器[.external]有了 -webkit-overflow-scrolling：touch属性以及[html.iframe body]可能需要-webkit-transform：translate3d（0,0,0）属性来修复，但到目前为止这还没有工作（{ {3}}）任何帮助将不胜感激。

Answer 1

关键是不要使用display: flex。

旋转{i 44]上的Safari ios iframe空白屏幕

1 个答案: