iOS下的 Fixed BUG

Aklman 发布于2019-08-29 17:04 / 1314人阅读

input 光标位置乱窜

固定式浮层内的输入框光标会发生偏移。即 fixed 定位的容器中输入框光标的位置显示不正确，没有正常地显示在输入框中，而是偏移到了输入框外面

可触发条件

页面body出现滚动条

点击页面出现用fixed定位的弹框，弹框内有输入框，键盘弹起，页面发生滚动

键盘弹起后手动滚动页面

通过调试工具发现键盘弹起视图向上调整了，但页面中元素所占的位置，其实并没有向上进行调整；输入框所占的位置还是原来键盘未弹起时的位置

input位置

原因

软键盘唤起后，页面的 fixed 元素将失效，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了

不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题

解决思路

iOS 下由于软键盘唤出后，页面 fixed 元素会失效，导致跟随页面一起滚动，倘若页面不会过长出现滚动，即便 fixed 元素失效，也无法跟随页面滚动，也就不会出现上面的问题了

.content {
    /* main绝对定位，进行内部滚动 */
    position: absolute;
    top: 0;
    bottom: 0;
    right:0;
    left:0;
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性，可以增加弹性 */
    -webkit-overflow-scrolling: touch;
}

这样不管是弹框里的input还是input位置都能一劳永逸

相关资源

https://bugs.webkit.org/show_... （Wrong caret position for input field inside a fixed position parent on iOS 11 ）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114084.html

iOS下的 Fixed BUG

input 光标位置乱窜固定式浮层内的输入框光标会发生偏移。即 fixed 定位的容器中输入框光标的位置显示不正确，没有正常地显示在输入框中，而是偏移到了输入框外面 showImg(https://segmentfault.com/img/bVbiJCo?w=750&h=1334); 可触发条件页面body出现滚动条点击页面出现用fixed定位的弹框，弹框内有输入框，键盘弹起，页面发生滚...

Genng 2019-08-02 11:50 评论0 收藏0
iOS下的 Fixed BUG

input 光标位置乱窜固定式浮层内的输入框光标会发生偏移。即 fixed 定位的容器中输入框光标的位置显示不正确，没有正常地显示在输入框中，而是偏移到了输入框外面 showImg(https://segmentfault.com/img/bVbiJCo?w=750&h=1334); 可触发条件页面body出现滚动条点击页面出现用fixed定位的弹框，弹框内有输入框，键盘弹起，页面发生滚...

didikee 2019-08-05 15:18 评论0 收藏0
第六天移动端Web开发注意事项

摘要：随着移动互联网的发展，移动已经逐渐成为互联网的主要入口，随之而来的是前端在移动开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结，必然不可能涉及方方面面，但会随着笔者的积累持续更新。随着移动互联网的发展，移动Web已经逐渐成为互联网的主要入口，随之而来的是前端在移动Web开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动Web开发需要注意...

妤锋シ 2019-08-30 13:09 评论0 收藏0
第六天移动端Web开发注意事项

摘要：随着移动互联网的发展，移动已经逐渐成为互联网的主要入口，随之而来的是前端在移动开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结，必然不可能涉及方方面面，但会随着笔者的积累持续更新。随着移动互联网的发展，移动Web已经逐渐成为互联网的主要入口，随之而来的是前端在移动Web开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动Web开发需要注意...

xbynet 2019-08-01 15:58 评论0 收藏0
Issues with position fixed & scroll（移动端 fixed

摘要：同时，请在其他移动端浏览器也这么处理，不要只对苹果做这些处理。苹果对于虎头蛇尾的做法真让人头疼，这作风跟巨硬真像。转载请注明英文原文及译文出处原文地址：Issues with position fixed & scrolling on iOS 原文作者：Remy Sharp译文地址：移动端 fixed 和 scroll 问题译文作者：鎏金圣手火麒麟最近在做iOS端的H5页面...

Jiavan 2019-08-21 17:00 评论0 收藏0