Bug 267688

Summary: No close of popover with click/touch on backdrop in Safari iOS and iPadOS
Product: WebKit Reporter: Russ <russ>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: a_protyasha, bramus, karlcow, lwarlow, ntim, rik, webkit-bug-importer, webkitbugs
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 17   
Hardware: iPhone / iPad   
OS: iOS 17   
See Also: https://bugs.webkit.org/show_bug.cgi?id=273141

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 😆