[Bug] Modals in Safari are not shown

[carlosjfcasero]

• I am using the latest version of Trailarr.
• I've checked Docs to see if this is intended behaviour.
• I've checked existing issues to see if this is already reported

Describe the bug
When opening Trailarr in Safari browser, modals are not displayed (for example, Home-Custom filters or Movies-Edit-select some-download)

Steps To Reproduce

[nandyalu]

Will take a look over the weekend!

[nandyalu]

Thanks for the report! A fix is now on dev and will be in the next nightly build.

Could you try the nightly image (nandyalu/trailarr:nightly) and let me know if the modals show for you?

I could not reproduce this locally, so it would also help to know your exact Safari version (Safari > Settings > About, or Version in the menu) and whether you are on macOS, iPadOS, or iOS.

[carlosjfcasero]

I just tested again and it's still not working. Maybe I have to wait for following nightly image?
My Safari version is 26.6 (21624.4.5.11.5) and I'm testing on Mac.

I tested in iOS as well and it's not working either (latest Safari version)

[nandyalu]

Can you post a screenshot as well and check if there are any errors in the browser console (Devtools).

[carlosjfcasero]

Sure:

[nandyalu]

Thanks — the screenshots pinned it down.

The page dims across the whole window, so the dialog is opening and its backdrop is painting. The dialog itself stays at opacity: 0. My first fix made it visible in the wrong way: it only fixed display, but the dialog still relied on an opening animation to fade in from transparent, and that animation does not run in Safari. So it never became visible.

The entrance is now a keyframe animation instead. If the animation does not run, the dialog just appears immediately — it can no longer end up invisible.

This is on dev now, so it will be in the next nightly build (a bit after this comment). Could you pull nandyalu/trailarr:nightly once more and let me know?

If it still fails, this one line in the Safari console with the modal open would tell me exactly what is stuck:

const d = document.querySelector("dialog[open]"); const s = getComputedStyle(d); console.log(s.display, s.opacity, s.translate, s.animationName, d.getBoundingClientRect());

[carlosjfcasero]

Hi. Error still persists.
With modal closed:

With modal open:

---

[nandyalu]

Your screenshots were very helpful, thank you — the DOMRect in the console gave the answer.

The dialog was no longer invisible: display was flex, opacity was 1, and the animation ran. But the box was 363 x 0, and it started at left: 204.5, which is the left edge of the content area next to the sidebar, and not the centre of the window. So Safari measured the dialog against a parent element instead of the window. The browser rule max-height: calc(100% - 38px) then gave the dialog a height of 0. The backdrop still covered the page, so you saw a grey page and no dialog.

Trailarr now sets the position and the size limits of an open dialog against the window (position: fixed, inset: 0, max-height: 90dvh, max-width: 92vw). A parent element can no longer make the dialog collapse.

I do not have a Mac or an iOS device, so I cannot test this in Safari myself. I tested it in WebKit 26.5, which is the engine of Safari 26, and in Chrome: the dialog keeps its size, stays in the middle of the window, and the content still scrolls.

This is on dev now, so it will be in the next nightly build. Please update to nandyalu/trailarr:nightly and tell me if you see the dialog now.

If the dialog still does not show, please run this in the Safari console with the modal open and post the output:

const d = document.querySelector("dialog[open]");
console.log(d.className, d.children.length, getComputedStyle(d).position, d.getBoundingClientRect(), d.firstElementChild?.getBoundingClientRect());