Bug 267688 – [popover] Light dismiss doesn't work on iOS/iPadOS

• Component: DOM
• Status: RESOLVED FIXED

[Russ]

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.

[Radar WebKit Bug Importer]

<rdar://problem/121591037>

[Tixie]

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]

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]

Wow cursed 😆

[Callionica]

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]

Would love to see a fix for this. It is such an important feature of the popover API.

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)]

From Luke's comment, if anyone wants to give a stab at fixing this, I think this is the right code to touch:

https://searchfox.org/wubkat/rev/cde6cf2e21001cb4055a5f891ce3d7abe5eee3e9/Source/WebCore/dom/Element.cpp#495-496,518

Line 518 is the one that triggers the light dismiss codepath, and line 495/496 is the line that blocks this codepath from being reached when there's no relevant event listener.

EWS should show a progression if this is fixed, and the iOS baseline of the popover-light-dismiss.html test can be updated accordingly if that is the case.

[Tim Nguyen (:ntim)]

Pull request: https://github.com/WebKit/WebKit/pull/35200

[Tim Nguyen (:ntim)]

Created attachment 472935 [details]
with-pointerdown-listener.html

....

[Tim Nguyen (:ntim)]

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]

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)]

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

[Virginia Baltimore]

(In reply to Tim Nguyen (:ntim) from comment #15)
> 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 https://cluster-rush.com

Thanks for sharing!