Question

我知道这方面似乎有很多，但没有一个解决方案似乎解决了我的问题。

我正在尝试将固定按钮应用到屏幕底部在iframe中。在我目前的实现中，每当我滚动时，我都会在iOS Safari上遇到一个可怕的闪烁。

这基本上就是我所拥有的：

HTML

<iframe>
 <body>
  <div class="app">
   <div class="app-content">
     <div class="card">
       <h1>Header</h1>
       <p>Content</p>
     </div>
     <button class="fixed-button">This is flickering</button>
   </div>
  </div>
 </body>
</iframe>

CSS

iframe {
 border: none;
 position: absolute;
 height: 100%;
 width: 100%;
 top: 0; left: 0;
}

app {
 -webkit-overflow-scrolling: touch;
 overflow:auto;
 position:absolute;
 width:100%;
 height:100%;
}

fixed-button {
 position: fixed;
 bottom: 1rem;
}

我的网站上有一个WIP http://jaredrauh.com/iframe-fixed-elements-ios/。任何建议都会很棒。

修复了iOS上iframe中的元素闪烁

0 个答案: