Проблемы с заполнением IFrame в iOS (mobile-safari) - PullRequest
Новая
       27

Проблемы с заполнением IFrame в iOS (mobile-safari)

0 голосов
/ 02 марта 2019

Я пытаюсь показать отзывчивое окно iframe, это нормально работает на рабочем столе и Android, но я не вижу последние строки в iframe на iOS (мобильное сафари), похоже, что padding-bottom не работает.

Вот ссылка: https://codesandbox.io/s/7jy8jx3o00

html: 

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/styles.css" />
  </head>

  <body>
    <div id="app">
      <div class="top">Top Menu</div>
      <div class="iframeWrapper">
        <iframe src="/ifcontent.html"></iframe>
      </div>
    </div>
    <div class="bottom">Bottom Menu</div>
  </body>
</html>

css: 

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#app {
  min-height: 100%;
  height: 1px;
  box-sizing: border-box;
  padding-top: 50px;
}
.top {
  position: fixed;
  top: 0;
  height: 50px;
  width: 100%;
  background: gray;
}
.bottom {
  position: fixed;
  bottom: 0;
  height: 70px;
  width: 100%;
  background: #8dc149;
}
.iframeWrapper {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 70px;
}
iframe {
  height: 100%;
  width: 100%;
  border: 0;
}
...