No close of popover with click/touch on backdrop in Safari iOS and iPadOS

• Component: CSS
• Status: NEW ---

[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 😆