CSS3: 解决 iOS 11 低版本输入框光标溢出问题

2,822 阅读1分钟

问题复现

image

测试反馈了一个问题

  • 在使用内嵌 webview, iOS 的时候发现了密码的输入框的光标不在正确的位置,溢出到 input 框外面了。
  • google 了一下问题,发现是 i 11 低版本的 safari 浏览器会出现的问题。
  • hackernoon.com/how-to-fix-… (具体的问题链接)

怎么解决 Ios 光标溢出的问题?

解决方案一

  • 使用全局的绝对布局
// css
 .body{
   @media screen and(max-width:450px){
        position: fixed;
        width: 100%;
    }
 }

body 元素使用fixed 布局,width:100%

这里会出现移动端不能滑动的问题

  • 这里升级一下代码解决一下这个问题, 设置 overflow
.body{
    @media screen and(max-width:450px) {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }
}

密码输入框的设计,不需要光标直接隐藏

  • 隐藏光标有几种方法
  • 直接使用 caret-color
// css
.hide-cursor{
    caret-color: transparent; // ios safari 11.1 +支持
}

image

由于 caret-color 只支持 iOS 11.1 +,我们使用 text-indent来移动行内缩进量,给个足够大的值,造成隐藏光标的作用

.fix-ios-safari-11.1{
    text-indent: -9999px; // 隐藏光标
    margin-left: -50%;
}

写在最后

  • 好消息是最后再 iOS 11.3 以后的版本都解决了上诉问题
  • Finally, as of iOS 11.3 this has been resolved 🎉

参考