• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

ios - iOS 11修复了滚动输入错误+抖动

[复制链接]
菜鸟教程小白 发表于 2022-12-11 19:11:34 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

iOS 11与固定容器内的输入有问题,特别是与iOS 11对焦+键盘光标与输入不对齐:
more here
我有一个元素.rn-drawer应该固定在页面顶部,而页面内容的其余部分是可滚动的。固定元素包含一个输入。

.rn-drawer {
    position: fixed;
    transition: all 0.25s ease-in-out;
    display: flex;
    height: 260px;
}

通过简单地将下面的.iOS-fix应用到父/根容器,我可以解决输入到键盘的不对中问题。
.iOS-fix {
    position: fixed;                            // causes jitter on scroll, but resolves fixed input alignment bug
    /*position: sticky;                         // no jitter, but doesn't resolve fixed input alignment bug*/
    /*transform: translate3d(0, 0, 0);          // no jitter + resolves fixed input alignment, BUT loses fixed position on children (like .rn-drawer)*/
    overflow-y: scroll;
    height: 100%;
    width: 100%;
}

但是滚动条上有一个非常糟糕的抖动/结巴,经过一些研究,我相信解决这个问题的方法是通过应用enter image description here来强制css中的gpu加速。
好的,这解决了这个抖动和固定的输入对齐问题,但是现在postion:fixed;上的.rn-drawer不再适用;因为转换改变了子元素的坐标系(因此我的抽屉没有固定)。
position: sticky;停止抖动,但与输入不对中的问题相同。
是否有任何可行的解决方案,将解决输入对齐错误,但也允许我的输入容器是固定的,不会造成任何滚动抖动?
谢谢。



Best Answer-推荐答案


我对模态也有类似的问题。我发现这篇文章可能有帮助:https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8。不过,在imo看来,这3个建议的修复方法都不够好。
有趣的是,这个问题复制了iOS Safari,Chrome,但不是Dolphin…

关于ios - iOS 11修复了滚动输入错误+抖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47084104/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap