Problem of repetition

The test returned a question

  • When using the embedded WebView on iOS, I noticed that the cursor in the password input field was not in the correct position and overflowed the input field.
  • I googled the problem and found it was with earlier versions of safari I 11.
  • Hackernoon.com/how-to-fix-… (Links to specific questions)

How to solve the problem of Ios cursor overflow?

Solution 1

  • Use a global absolute layout
// css
 .body{
   @media screen and(max-width:450px) {position: fixed;
        width: 100%; }}Copy the code

The body element uses a fixed layout, width:100%

This is where the mobile end doesn’t slide

  • Let’s update the code to fix this and set overflow
.body{
    @media screen and(max-width:450px) {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        overflow-y: scroll;
        overflow-x: hidden; }}Copy the code

Password input box design, do not need to hide the cursor directly

  • There are several ways to hide a cursor
  • Use caret-color directly
// css
.hide-cursor{
    caret-color: transparent; // ios safari 11.1+ support}Copy the code

Since Caret-Color only supports iOS 11.1 +, we use text-indent to move the line indentation to a value large enough to hide the cursor

.fix-ios-safari-11.1{
    text-indent: -9999px; // Hide the cursormargin-left: -50%;
}
Copy the code

Write in the last

  • The good news is that the appeal issue was finally resolved in iOS 11.3 and beyond
  • Finally, as of iOS 11.3 this has been resolved 🎉

reference

  • Medium.com/hackernoon/…
  • Segmentfault.com/q/101000000… (Hide the cursor directly)
  • Forums.developer.apple.com/thread/9772… (Problem tracking of Apple Development Center)