0
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） 助けてください。
少し説明が参考になります。 – 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-代わりに）。 - [レビューより]（/レビュー/低品質の投稿/ 17132013） – Pavan