选择下拉菜单在 Safari 浏览器中的 iPhone iOS 版本 14.6 上不起作用答案

【问题标题】：Select Dropdown is not working on iPhone iOS version 14.6 in Safari Browser选择下拉菜单在 Safari 浏览器中的 iPhone iOS 版本 14.6 上不起作用
【发布时间】：2021-08-31 02:53:37
【问题描述】：

我正在使用非常基本的 HTML 来创建选择下拉菜单。喜欢

<select>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                        <option value="4">Four</option>
                    </select>

但是当我在 14.6 版本的 iPhone 上运行我的网站时。我无法设置或更改下拉列表的值。有什么已知问题吗？更多细节：我正在使用 angular 1.x、boostrap、ASP Dot Net。

【问题讨论】：

我们正在做一些测试。看起来像没有 JS 框架的基本 HTML，这不是问题。我们使用 React 应用程序进行了测试，这不是问题。它似乎只发生在 Angular 1
我还要注意，我们已经确定这个问题不是 Safari 特有的，它发生在 iPhone 上的 Chrome 或 Safari 上。
我们正在努力创建一个简单的简单 html 文件来重现此问题。在一项测试中，似乎包含 ngMaterial 作为依赖项的行为会导致此问题发生。但是，如果它只是一个准系统的 angular 1 应用程序，那么到目前为止还没有发生问题。
@dfritch 实际上，问题出在 fastclick.js 文件上。当我从与 fastclick 相关的索引页面中删除代码和 js 文件引用时，它既简单又 ng-option/ng-repeat 下拉菜单开始正常工作。

标签： ios iphone select dropdown mobile-safari

【解决方案1】：

编辑（2021 年 8 月 13 日）

这是 Apple 对错误报告的回应。

工程部门提供了有关此问题的以下信息：

请注意，这在 iOS 15 中已修复，因为我们更改了

iOS 15 测试版 5 (19A5318f) https://developer.apple.com/download/

有关日志记录指令的完整列表，请访问： https://developer.apple.com/bug-reporting/profiles-and-logs/

我已经在 Xcode 模拟器中测试了 iOS 15 Beta，这不是问题。因此，随着 iOS 的下一个版本，这个问题有望为其他遇到问题的人解决。

原答案

这似乎是最新 iOS 版本的问题。

我将向 Apple 提交一个错误，并根据我从他们那里听到的内容更新此答案。

在 14.6 版本发布之前，我们的 Angular 1.x 应用程序一直运行良好，然后 iPhone 在 Chrome 和 Safari 中特别开始出现问题（Android 似乎不受影响，台式电脑也可以正常运行。据我们所知，这只是iOS 的问题）。当用户从下拉列表中选择一个输入然后按“完成”时，它只会偶尔更新选择。大多数情况下，旧选项保持选中状态，但偶尔会使用新选项进行更新。使用向上/向下箭头的效果似乎稍好一些，但有时仍只能保留选择。

我可以使用下面的简单示例重现该问题。测试表明，在 iOS 14.5 或 14.6 上运行 Angular 1.x 和某些其他依赖项会导致问题。 Angular 1.x 本身不会造成问题。

到目前为止导致问题的已知依赖项：

温泉 UI 版本 1.3.17。（2.11.2 版似乎运行良好）。

    <!doctype html>
    <html ng-app="myApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="https://unpkg.com/onsenui@1.3.17/js/onsenui.min.js"></script>
    </head>
    <body>
    <div ng-controller="BasicCtrl">
        <select>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
        </select>
        <select ng-model="selectedOpt" ng-options="opt as opt.name for opt in opts">
        </select>
        <div>{{'{name: ' + selectedOpt.name + ', id: ' + selectedOpt.id + '}'}}</div>
    </div>
    <script type="text/javascript">
      var app = angular.module('myApp', []);
      app.config(function() {});
      app.controller('BasicCtrl', function ($scope) {
        $scope.opts = [
          {id: 1, name: "A"},
          {id: 2, name: "B"},
          {id: 3, name: "C"},
          {id: 4, name: "D"},
          {id: 5, name: "E"},
          {id: 6, name: "F"}
        ];
      });
    </script>
    </body>
    </html>

系统规格： macOS Big Sur 11.4 版

型号名称：MacBook Pro

型号标识符：MacBookPro13,3

处理器名称：四核 Intel Core i7

处理器速度：2.6 GHz

处理器数量：1

内核总数：4

L2 缓存（每核）：256 KB

L3 缓存：6 MB

超线程技术：启用

内存：16 GB

XCode 模拟器：

版本 12.5 (961.1)

模拟器套件 609

核心模拟器 757.5

iPhone 12 Pro Max

iOS 14.5

【讨论】：

感谢@NiFiNiTe 的回答。实际上，问题出在 fastclick.js 文件上。当我从与 fastclick 相关的索引页面中删除代码和 js 文件引用时，它既简单又简单，并且 ng-option/ng-repeat 下拉菜单开始正常工作。

【解决方案2】：

在我的 index.aspx 页面中，我使用的是 fastclick.min.js 和 document.ready 块中的代码行上方。

var attachFastClick = Origami.fastclick;
attachFastClick(document.body);

所以基本上我做了什么，从上到下跟踪索引文件的脚本代码，这可能是导致此下拉问题的原因。因此注释掉了可能导致问题的代码行，然后在 iOS 14.6 设备上进行了 Safari 浏览器测试。一旦我注释掉与快速点击相关的代码并检查 iphone iOS 14.6 开始工作了。

我不确定为什么当包含 fastclick.js 时下拉菜单在 iPhone iOS 14.6 Safari 浏览器上不起作用。

【讨论】：

【解决方案3】：

我遇到了类似的问题。这个问题与角材料有关

告诉 AngularJS Material Gesture 模块跳过（或忽略）移动设备上的点击劫持。

$mdGestureProvider.skipClickHijack();

【讨论】：