RESOLVED FIXED 267688
[popover] Light dismiss doesn't work on iOS/iPadOS
https://bugs.webkit.org/show_bug.cgi?id=267688
Summary [popover] Light dismiss doesn't work on iOS/iPadOS
Russ
Reported 2024-01-18 04:05:00 PST
The click/touch on the backdrop of a open [popover], does not close the [popover] on Safari iOS/iPadOS. It does close the [popover] on the Safari macOS, Chrome desktop, Firefox desktop (with a polyfill), Chrome Android, Firefox Android (with a polyfill). The [popover] should close when clicked/touched on the backdrop [popover]::backdrop or pressing the escape key on a keyboard. MDM Example https://mdn.github.io/dom-examples/popover-api/blur-background/ In the above example, click/touch the ‘Show popover’ button. Now click/touch outside the [popover] on the screen background (purple stars) and this should close the [popover] (light-dismissal). It does **not** close the [popover] in Safari 17.2 iPadOS and Safari17.2.1 iOS. It **does** close the [popover] as expected in Safari macOS 17.2.1. In addition, using an Apple Magic Keyboard with an iPad Pro M2 11", clicking with the trackpad on the background does close the [popover]. But Command + period key (Esc) should dismiss the [popover] but does not.
Attachments
with-pointerdown-listener.html (149 bytes, text/html)
2024-10-15 01:37 PDT, Tim Nguyen (:ntim)
no flags
Radar WebKit Bug Importer
Comment 1 2024-01-25 04:05:14 PST
Tixie
Comment 2 2024-03-11 21:23:53 PDT
Hi, I have the same issue even with any backdrop. Just a popover (short for popover="auto" should allow to be closed when clicked/taped outside of it. Or I can’t achieve that on my phone on iOS 17.4. Here a very simple demo you can test on if you wanna reproduce the issue https://codepen.io/Tixie/pen/eYozYvj
Luke Warlow
Comment 3 2024-03-15 16:41:52 PDT
I'm able to reproduce this issue, specific on my iPad running iPad OS 17.4, a touch outside of a popover won't close it, but clicking with a mouse (for example one moved onto the iPad via universal control from a mac) does close it. Adding a pointerdown event listener to document.body, "fixes" the issue.
Tixie
Comment 4 2024-03-17 06:18:10 PDT
Wow cursed 😆
Callionica
Comment 7 2024-08-31 00:51:17 PDT
This is an important bug to fix before we can use popover in our sites. If you have any influence over MDN compat data, maybe you could also encourage an update to show this issue to avoid confusion. I’m seeing this bug still on iOS 17.6.1
Rogier de Ruijter
Comment 8 2024-09-08 11:42:44 PDT
Would love to see a fix for this. It is such an important feature of the popover API.
ik
Comment 9 2024-10-01 08:23:03 PDT
Friendly ping, this bug is still reproducible in iOS 18. ...and an Interop 2024 focus area: https://webkit.org/blog/14955/the-web-just-gets-better-with-interop/#:~:text=on%20Windows%2010.-,The%202024%20Focus%20Areas,-Accessibility
Tim Nguyen (:ntim)
Comment 10 2024-10-13 01:57:02 PDT Comment hidden (obsolete)
Tim Nguyen (:ntim)
Comment 11 2024-10-14 23:50:41 PDT
Tim Nguyen (:ntim)
Comment 12 2024-10-15 01:37:13 PDT
Created attachment 472935 [details] with-pointerdown-listener.html ....
Tim Nguyen (:ntim)
Comment 13 2024-10-28 16:43:28 PDT
I debugged this a bit further, the touch events seem blocked at the UI process level, `WebPageProxy::handlePreventableTouchEvent` has `touchEventsTrackingType` set to `NotTracking` in the bad case, to `Asynchronous` in the good case.
EWS
Comment 14 2024-10-31 18:00:52 PDT
Committed 285990@main (818287041d80): <https://commits.webkit.org/285990@main> Reviewed commits have been landed. Closing PR #35200 and removing active labels.
Tim Nguyen (:ntim)
Comment 15 2025-01-17 16:31:02 PST
For those wondering, this bug fix shipped in Safari 18.3 beta: https://developer.apple.com/documentation/safari-release-notes/safari-18_3-release-notes
Note You need to log in before you can comment on or make changes to this bug.