Hey there, let's troubleshoot this frustrating input problem you're facing on iPhone and Safari. It’s really common for CSS (especially WebKit-specific properties) to interfere with input interactions on iOS, so let’s break down the most likely causes and fixes:

Common Culprits & Solutions #

• Check for user-select restrictions
  If any parent element (like your .container or .input classes) has user-select: none or -webkit-user-select: none applied, Safari will block text selection and focus for child input elements—even if the input itself doesn’t have the property. Fix this by explicitly overriding it for your inputs:

  .input input {
    -webkit-user-select: auto;
    user-select: auto;
  }
  

• Verify pointer-events settings
  If a parent element has pointer-events: none, your input won’t receive any click/touch events at all. Make sure your .container, .input, or input elements don’t have this property, or reset it for inputs:

  .input input {
    pointer-events: auto;
  }
  

• Look for unintended touch event blocking
  If your Vue component or parent elements have touch event listeners (like touchstart or touchmove) that call e.preventDefault(), this can break Safari’s default input behavior. Double-check any touch-related event handlers to ensure they aren’t blocking necessary interactions.

• Check Vue’s v-if rendering timing
  Since you’re using v-if="user === null" to render the inputs, there’s a chance the DOM isn’t fully ready when you try to interact with them. If appropriate, try switching to v-show (which keeps elements in the DOM but hides them) instead. If you’re programmatically focusing inputs later, wrap that logic in $nextTick to ensure the DOM is updated:

  this.$nextTick(() => {
    // Focus input here
  });
  

If none of these fixes work, sharing the full CSS for your .container and .input classes would help—other properties like transform, position: fixed, or z-index can sometimes cause layering issues that block input access on iOS.

内容的提问来源于stack exchange，提问作者Silve2611