Popover: Safari 18 fallback for CSS anchor positioning

[bdfranck]

We've learned that over 16% of Albertans may be accessing services using Safari 18. This version is over a year old and cannot be updated unless the user upgrades their entire operating system.

Safari 18 supports the Popover API but not CSS anchor positioning. Here's how it looks with our Popover API rewrite:

Desktop Safari 18.6

553732460-2ea17662-ac52-4a8a-9732-317025fbf955.mp4

Mobile Safari 18.6

iOS-Safari-18-issues.mp4

Both desktop and mobile have the same behaviour:

• If there is enough space below the trigger than the popover will appear in the top left corner of the viewpoint
• If there isn't enough space then the popover will not appear because it was rendered above the viewport

The popover appears broken and will be disruptive for Albertans using this browser. Let's create a fallback for these users to ensure it still works for them.

Acceptance Criteria:

• A browser that doesn't support CSS anchor positioning uses a fallback
• Newer browsers that support CSS anchor positioning work as expected

[willcodeforcoffee]

Can we use a polyfill like https://anchor-positioning.oddbird.net/?

[bdfranck]

We discussed in standup that a polyfill may be better approach if it isn't too large.