Bug 267688 - No close of popover with click/touch on backdrop in Safari iOS and iPadOS
Summary: No close of popover with click/touch on backdrop in Safari iOS and iPadOS
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 17
Hardware: iPhone / iPad iOS 17
: P2 Normal
Assignee: Nobody
Keywords: BrowserCompat, InRadar
Depends on:
Reported: 2024-01-18 04:05 PST by Russ
Modified: 2024-04-23 13:03 PDT (History)
8 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Russ 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
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.
Comment 1 Radar WebKit Bug Importer 2024-01-25 04:05:14 PST
Comment 2 Tixie 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
Comment 3 Luke Warlow 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.
Comment 4 Tixie 2024-03-17 06:18:10 PDT
Wow cursed 😆