[BUG] Multiple buttons not working on Webkit Browsers - unusable on any iPhone or iPad

[dasdreHmomenT]

First, thank you @seanmorley15 for this great software. I tried it in other (Desktop) browsers and it's really cool.

🐞 Bug Description

Many UI elements (buttons) just don't respond in any browser based on Webkit. It affects the creation of events, collections (after the first has been created), the "+" button on days in collections, the "..." button to edit a collection, and probably many more. The result is that you just can't use AdventureLog on these browsers.

🔄 Steps to Reproduce

Steps to reproduce the behavior:

1. Open frontend on any Webkit-based browser
2. Try to create a Location, a second collection, anything on a day in a collection, etc
3. nothing happens

✅ Expected Behavior

Buttons working - as they do in Chromium-based browsers

🐳 Environment Details

• Platform: Docker
• Install Method: Docker Compose
• AdventureLog Version: v0.12.0 (same on v0.11)
• Reverse Proxy: Nginx, but also tested without proxy, the behavior is the same.

📎 Additional Context

This has been reported a couple of times before: #966, #968 and #973 are open. One of those mentions the reverse proxy but, as stated above, I tested without and it's the same with a fresh install without a proxy.
On discord it's described on https://discord.com/channels/1260594104497344512/1467074559424466965 , https://discord.com/channels/1260594104497344512/1424620580212314275 ,
https://discord.com/channels/1260594104497344512/1397841372173701241 ,
and on general p.e. on https://discord.com/channels/1260594104497344512/1260594104933548096/1450507137162805381

The same was reported on #799 which was closed by #1007 but it's not resolved, the issue persists.

As it is, it affects not only people preferring Safari (and some other desktop browsers) but more importantly everyone on an iPhone or iPad because all browsers on those must use Webkit. This excludes a very large audience from this awesome software, sadly also my friends whom I'm going on a trip with in May.

Anyway, on #799 there were some pointers on what must be done:

I'm guessing that the bug is related to a Safari behavior where ignores interactive elements without a valid href attribute or dynamically added anchor elements.

A solution could be to create a CSS rule to add cursor: pointer to all custom buttons/dropdowns/components in the app. Something like .btn { cursor: pointer; }. Or try with any of the other workarounds available

Originally posted by @ivanmendoza in #799

I'm unfortunately not a developer, but I would be willing to test extensively.

Thank you!

[shauntek]

confirmed this issue happened on macOS Tahoe 26.3.1. add new location or collection button not working in Safari. But MS Edge works.

[dasdreHmomenT]

Makes sense as Edge is Blink (Chromium) based.

[seanmorley15]

Will take a look at it when able but I only have 1 apple device (an Ipad) so if other users who are willing to open a PR for this and can test it would be greatly appreciated.

Sorry for the issue in the meantime.

[dasdreHmomenT]

thanks for looking into it.
as stated above, I'm more than willing to test. I have devices running macOS, iOS and iPadOS if you want tests on all affected OSs.

[zackelia]

I believe the issue here might be the one mentioned in DaisyUI's dropdown docs (https://daisyui.com/components/dropdown/#method-3-css-focus):

Safari has a CSS bug since 2008 that prevents button elements from being focused, so we use div tabindex="0" as a workaround.
This approach is accessible with the addition of role="button" and functions consistently across all browsers.

Looking at the code, I see tabindex="0" for the focusable button and tabindex="-1" for the content part to be missing in various places.

On macOS Safari, I naively added the missing tabindex="-1" with Inspect Element to the "+" button in the collections page and then the button appeared to function as expected.

[shauntek]

thanks @zackelia, I have confirmed the workaround works!

@seanmorley15 I can help to test on Apple devices.