Select 下拉菜单无法在 Safari 浏览器中的 iPhone iOS 版本 14.6 上运行

Question

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

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

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

Answer 1

编辑（2021 年 8 月 13 日）

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

Engineering has provided the following information regarding this issue:

Please know that this is fixed in iOS 15, as we changed the UI for <select> elements.

iOS 15 beta 5 (19A5318f) https://developer.apple.com/download/

For a complete list of logging instructions visit: https://developer.apple.com/bug-reporting/profiles-and-logs/

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

原答案

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

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

我们的 Angular 1.x 应用程序在 14.6 发布之前一直运行良好，然后 iPhones 在 Chrome 和 Safari（Android 似乎不受影响，台式机也可以正常工作。据我们所知，这只是 iOS) 的问题。当用户从下拉列表中选择一个输入然后按“完成”时，它有时只会更新选择。大多数时候，旧选项保持选中状态，但偶尔会更新为新选项。使用 up/down 箭头似乎只稍微好一点，但有时仍然只保留选择。

我可以使用下面的简单示例重现该问题。测试表明运行 Angular 1.x 和 iOS 14.5 或 14.6 上的某些其他依赖项会导致问题。 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

处理器名称：四核英特尔酷睿 i7

处理器速度：2.6 GHz

处理器数量：1

核心总数：4

L2 缓存（每核心）：256 KB

三级缓存：6MB

超线程技术：启用

内存：16GB

XCode模拟器：

版本 12.5 (961.1)

SimulatorKit 609

核心模拟器 757.5

iPhone 12 专业最大

iOS14.5

Answer 2

在我的 index.aspx 页面中，我使用了 fastclick.min.js 以及 document.ready 块中的代码行。

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

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

我不确定为什么在 iPhone iOS 14.6 safari 浏览器上使用 fastclick.js include 时下拉菜单不起作用。

Answer 3

我遇到了类似的问题。这个问题是 angular-material

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

$mdGestureProvider.skipClickHijack();

Select 下拉菜单无法在 Safari 浏览器中的 iPhone iOS 版本 14.6 上运行

Select Dropdown is not working on iPhone iOS version 14.6 in Safari Browser

iphone

select

mobile-safari

ios

dropdown

编辑（2021 年 8 月 13 日）

原答案