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

问题复现

测试反馈了一个问题

• 在使用内嵌 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 +支持
}

由于 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

以上是本文的全部类容，感谢阅读，希望能帮到大家。更多教程请访问码农之家