Webkit：在iOS WKWebView中呈现的文件输入选择器不能通过单击操作

编程问答 2022-06-09

问题描述

我正在使用名为Onsen UI的前端javascript库来构建外观像Web / iOS应用程序的Web应用程序。

我遇到了这种奇怪的行为，我必须双击某些按钮才能使单击动作发生。根据我的发现，这种奇怪的行为仅发生在我的自定义输入按钮（即自定义文件上传按钮，自定义复选框按钮等）上。

为了提供更多背景信息，我隐藏了浏览器呈现的不太令人满意的默认文件<input>元素，而是呈现了自己的界面来打开文件选择器并显示用户要上传的文件

您可以通过使用display:none设置输入元素的样式并按如下所述在元素上调用click()方法来做到这一点：https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

当我从移动Safari应用程序访问我的Web应用程序时，只需轻按一下即可使用。但是在iOS WKWebView内部，我必须快速点按两次才能调用iOS相机/文件选择器。

下面是Onsen UI网络应用中的HTML，CSS和JS的代码段。

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>

请注意，我已将display输入的#image-selector设置为none，并将其放置在<ons-button>标记之间。除display: none

外，没有其他样式

CSS ：

下面是自定义媒体#upload-button

的CSS 
#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();

作为测试，我通过控制台记录了点击次数。我发现是＃image-selector的点击在Safari和Chrome中被触发（与这些浏览器的移动版本相同），但在WKWebView中却未被触发。

花费数小时搜寻互联网后，似乎是由于Webkit中的错误所致。我有什么办法可以解决这个问题？

谢谢

解决方法

在我们的客户端 PWA 的早期，我们遇到了一个非常烦人的问题，仅在 iOS 设备上的 Safari 中发生。有些按钮没有响应，有时会在最终响应之前多次点击。最后，我们进行了 3 次更改以成功解决此问题。

  1. 不要使用 ":hover" CSS 伪元素
- 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. 不要在按钮 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. 确保按钮的“可点击”区域尽可能大
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.