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.
<rdar://problem/121591037>
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
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.
Wow cursed 😆
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
Would love to see a fix for this. It is such an important feature of the popover API.