【发布时间】：2017-05-12 15:22:15
【问题描述】：
我有一个用 iframe 容器 div 包裹的 iframe，它从右侧占据 25% 的屏幕，所有元素都在 iframe 内。
iframe 中有一个文本框输入字段，在触摸时，所有元素都正常运行，并且窗口会根据 IPAD 的键盘进行调整，但是当我开始输入时，即在文本输入中添加了任何字符整个布局iframe-container 向左移动，然后在再输入几个字符后完全消失。
参考下图：
屏幕一（这是一直想要的 UI）
屏幕二（输入任何字符后用户界面混乱）
当添加更多字符时，即使此布局也会消失。
我通过 IOS 设备解决了一些 iframe 问题，并从那里遵循了一些概念和解决方案。
- 在这种情况下，iframe 没有添加任何滚动。 iframe 内的 div 正在滚动
- 还尝试将
-webkit-overflow-scrolling: touch;添加到可滚动的 div 中，但这也没有帮助。 - 正在使用 VH 作为高度，尝试删除它们并使用
PX也没有运气。
注意：很多 jQuery 被用于 UI 调整，不是特别针对 iframe 和十字按钮基本上切换 iframe-wrapper div（简单的隐藏和显示）。
谢谢！！
编辑
我找到了问题，现在我需要解决这个问题。
Safari 会自动添加background-position 属性并将其设置为Initial，手动覆盖为no-repeat 即可解决此问题。
我尝试为 background-position 添加 jQuery css 属性，但我猜想它没有被应用。
【问题讨论】：
标签： html ios css iframe responsive-design