在iOS 15以后的Safari上,间歇性HTML选择冻结



我们有一个用HTML/Javascript编写的单页应用程序,当我们的客户在iOS 15的所有版本的iPad上的Safari上使用HTML选择下拉菜单时,会遇到间歇性冻结,但在iOS 14或更早版本上则不然。在脱离睡眠模式时,似乎经常会出现冻结。关闭Safari并重新打开可以解决问题,但如果输入没有保存等,仍然会带来不便。我们有一些遗留的jQuery Mobile下拉列表,但问题既发生在这些下拉列表中,也发生在普通JS下拉列表中。

我们尝试过重新启动机器、检查存储、关闭任何Safari扩展、关闭GPU Process Canvas Rendering(在iOS 15中似乎默认打开(等等。它似乎并不是特定于特定型号的,因为用户有各种各样的型号。

我知道iOS 15中选择元素的UI发生了变化——有人遇到过这个问题吗?

是的,我在HTML选择方面遇到了一个可能与您的问题有关的问题:

  • 使用HTML选择创建PWA的桌面快捷方式
  • 打开PWA
  • 单击select=>应该打开(OK(
  • 按下主页按钮
  • 再次激活PWA
  • 单击select=>不打开

在下次重新启动之前,重新启动应用程序可以修复问题。

已检查iOS 15.1至15.4上的所有系统都会出现错误。适用于iOS 14。我还没有发现报告的问题。

更新:我对这个选择下拉列表问题进行了深入调查,并在bugs.webkit.org上发布了一个问题:https://bugs.webkit.org/show_bug.cgi?id=238318

这是几个组件(如选择、输入文件/日期/月(的下拉列表的问题,其中显示或消失下拉列表的动画似乎会卡住。有时你可以看到下拉列表很小而且非常透明(如果你放大屏幕截图(,有时即使你看不到下拉列表,你也可以选择一个选项。


我今天通过feedbackassistant.apple.com发布了一份错误报告,其中包括一段视频,显示@chris380提到的错误(我认为这可能与您的问题有关(。

这是我使用过的测试用例:

<html>
<head>
<meta name="viewport" content="width=device-width" />
<!-- iOS -->
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- hide browser UI -->
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="select test">
<!-- Chrome for Android -->
<meta name="mobile-web-app-capable" content="yes">
</head>
<body>
<select>
<option value="1">Amiga</option>
<option value="2">Apple</option>
<option value="3">Atari</option>
<option value="4">Commodore 64</option>
<option value="5">MSX</option>
</select>
</body>
</html>

这是我发布到苹果的信息:

- Have a html file with <meta name="apple-mobile-web-app-capable" content="yes" /> and a select> or use my testcase (https://cms0-sites.webhare.com/pulldown-test/select-app.html)
- Use an iPhone/iPad/simulator on a device with home button and with any iOS 15 version (tested up till 15.4)
- Visit the html page in Safari and use the share button to add it to the home screen
- Open the app from the home screen
- Activate (tap) a pulldown
- Click on the home button on the bottom of the iPhone or iPad
- Now click on the icon on the home screen again
- What often happens: the options popup isn't closed or no pulldown on the page can open the options popup. If the options popup stays open you'll at first still be able to scroll it but you cannot get it to close.
- If it doesn't happen you can try to restart the device and retry above steps (starting from opening the homescreen app)
Some interesting points I notices:
- This bug seems to be triggered on devices with a home button. My guess is that this is because using a gesture on the screen to switch apps cause the pulldown to be closed and so prevents the bug from being triggered)
- switching to another web-capable page added to the homescreen and then switching back makes the pulldowns respond again(!)
Other reports:
- https://developer.apple.com/forums/thread/689901 (issue with ios 15 beta 8)
- https://developer.apple.com/forums/thread/691863 (issue with select reported on the final ios 15)
- https://developer.apple.com/forums/thread/699982 (mention of someone reporting it for iOS 15.1)

我最近遇到了这个问题,并通过在表单中包含一个空的div元素(选项卡索引设置为0(在react中解决了这个问题。这阻止了select输入首先获得焦点,并阻止了错误。

<div tabIndex={0} />

当div收到焦点时,我删除了它,以防止用户用tab键点击它,因为这可能是一种令人困惑的体验。

最新更新