I'm using the Popover API and there are so many issues on iOS Safari

• using <dialog> combined with a form and input causes it to block the rest of the page (.cgi?id=276864)
• instead I tried using a <div> with role="dialog" and adding autofocus on the input, but that doesn't even open the popover ...
• skipping all that I tried using a form with an input field, but I cannot focus or type in it. Page seems to be blocked.

This above works fine in all browsers supporting Popover API, except for Safari 18+ on iOS (it does work on MacOS).

Is there something I miss because I seem to be blocked with the combination of a form and popover on iOS Safari. Forms and popover API seem to be unusable?

Here's a Codepen with the 3 situations

I'm using the Popover API and there are so many issues on iOS Safari

• using <dialog> combined with a form and input causes it to block the rest of the page (https://bugs.webkit./show_bug.cgi?id=276864)
• instead I tried using a <div> with role="dialog" and adding autofocus on the input, but that doesn't even open the popover ...
• skipping all that I tried using a form with an input field, but I cannot focus or type in it. Page seems to be blocked.

This above works fine in all browsers supporting Popover API, except for Safari 18+ on iOS (it does work on MacOS).

Is there something I miss because I seem to be blocked with the combination of a form and popover on iOS Safari. Forms and popover API seem to be unusable?

Here's a Codepen with the 3 situations https://codepen.io/Bregt/pen/MYWEpvd

• html
• safari
• popover-api

Share Improve this question Follow edited Mar 11 at 14:51 Bregt asked Mar 11 at 14:20 BregtBregt 19111 silver badge1212 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Okay this seems to be a bug that is fixed in 18.4. https://developer.apple/documentation/safari-release-notes/safari-18_4-release-notes