Webkit: File input picker rendered in iOS WKWebView does not work with a single tap

user_1761761 0
Viewed 458

I'm using a frontend javascript library called Onsen UI to build a web application that looks and feels like a native iOS/Android application.

I'm running into this bizarre behaviour where I have to double tap certain buttons in order for the click action to occur. From my findings, this weird behaviour only happens for my custom input buttons (ie. Custom file upload button, custom checkbox button etc).

To give more context, I'm hiding the not so pleasant default file <input> element rendered by the browser and instead presenting my own interface for opening the file picker and displaying which file or files the user wants to upload.

You can do this by styling the input element with display:none and calling the click() method on the element as mentioned here: https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

When I access my web app from the mobile Safari application, it works with one tap. However inside the iOS WKWebView, I have to tap twice quickly in order for the iOS camera / file picker to be invoked.

Below is a snippet of the HTML, CSS and JS from the Onsen UI web app.

HTML:

<form>
  <label>
    <ons-button id="upload-button" type="button">Upload Photo
      <input id="image-selector" name="document_front" type="file" style="display: none" accept="image/*" capture="camera" />
    </ons-button>
  </label>
</form>

Notice that I've set the display of the #image-selector input to none and placed it in between the <ons-button> tag. It has no other styling other than the display: none

CSS:

Now below is the CSS for the custom media #upload-button

#upload-button {
    height: 48px;
    text-align: center;
    padding: 7px;
    border-radius: 200px;
    position: absolute;
    bottom: 27px;
    left: 16px;
    right: 16px;
    background: #EB1700;
    font-size: 18px;
}

Javascript:

document.querySelector('#upload-button').onclick = function () {
    document.querySelector('#image-selector').click();

As a test, I console logged the clicks. What I found is the click for the #image-selector was being fired in Safari and Chrome (same for mobile versions of these browsers) but it did NOT fire in WKWebView.

After spending hours scouring the internet, it seems it's due to a bug in webkit. Any ideas on what I can do to solve this?

Thank you

wkwebview onclick webkit html ios
1 Answers

Early in the life of our client PWA we had a very annoying problem happening only in Safari on iOS devices. Some buttons were unresponsive and would sometimes take multiple taps before finally responding. In the end we made 3 changes to successfully address this.

  1. Do not use the ":hover" CSS pseudo element
- The Annoying Mobile Double-Tap Link Issue | CSS-Tricks
https://css-tricks.com/annoying-mobile-double-tap-link-issue/

- Ensuring that your UI element is on top (z-index values) and using the 
“cursor” property of the CSS class will get you “on hover” cursor effects
without using the pseudo element.
  1. Do not use transparencies in your button UI
- This one is especially annoying as it often means you need to create or 
get image assets that have the desired background color built in.

- I would say it is OK to only worry about this one if you have reports of
your button not being responsive.
  1. Make sure the “tappable” area of your button is as big as possible
This is mostly a testing item. Test that when tapping at the edge of your
button, not directly on the image or text, the button still activates.  
If it sometimes does not, then consider implementing the fixes above.
user_162370220
Related