[Elements] Flyout Menu Positioning Bug in Safari 18 (macOS 15.6.1)

[schindlerchristian]

I'm encountering a positioning bug with @tailwindplus/elements components using <el-popover>, specifically in Safari 18.6 on macOS 15.6.1.

Bug occurs in Safari:

• On first open, the flyout is correctly positioned below the trigger.
• On reopening the flyout (e.g. clicking "Product" again), the panel jumps to the left, is cut off, or otherwise misaligned.
• In some cases, the issue only appears after resizing the browser window.
• Interestingly, when using those same blocks in a regular project template, the issue does not appear immediately — but does after a resize.

Works correctly in:

• Chrome 139.0.7258.139 (arm64)
• Firefox 142.0 (aarch64)

Affected UI Blocks

On https://tailwindcss.com/plus/ui-blocks/marketing/elements/headers:

• "With stacked flyout menu"
• "With multiple flyout menus"
• "With icons in mobile menu"

On https://tailwindcss.com/plus/ui-blocks/marketing/elements/flyout-menus:

• "Two-column"

Let me know if you'd like a screen recording or a simplified reproduction.

[mauskin]

I have the same thing.

Another issue, which probably could indicate the root cause, is that the popover is closing immediately without animation.

[RobinMalfait]

@mauskin are you seeing the same issue on Tailwind Plus, or do you have an issue in your own project?

---

Looking into this as we speak, and writing down some notes...

• If the parent element doesn't have the relative class, then it works as expected. Note: other examples with a parent that has a relative class work just fine.
• When inspecting via devtools, manually updating the left property doesn't affect the element (this part definitely seems like a Safari bug).
• Changing a value (like display) will trigger a re-render causing it to work again.
• If the popover was opened via the keyboard (space or enter) then it works fine, but it won't if you use the mouse.
• If I'm in an iframe (like on Tailwind Plus) it breaks, when I'm not in an iframe, it works as expected.
• If I copy the example in Tailwind Play (which also uses an iframe), it also works as expected.

[mauskin]

@RobinMalfait I caught it in my project and then found out that it reproduces on Tailwind Plus website, which I used in steps to reproduce it in the issue I’ve created (#1741).

[RobinMalfait]

Got it, so it looks like it is a Safari bug but we think we have a workaround (testing right now). Will update with more information soon.

[RobinMalfait]

We identified the problem (a Safari bug, and we will be opening an issue there soon), but we also have a workaround that we just shipped in the latest version (v1.0.11).

If you upgrade to the latest version, then this bug should be solved. You should be able to look at the original places from above and they should be solved (they are here in Safari and Safari Technology Preview).

For the bug itself, turns out that if you close a popover and if there is still a position: absolute in the style attribute. Opening the popover again will render in the wrong spot and changing the left property doesn't do anything for some unknown reason.

TL;DR: Fixed in the last version.

[mauskin]

I confirm, it works now. Thanks!

(Though closing animation still doesn’t work.)

[RobinMalfait]

Yep, unfortunately that's a browser bug. Wrote more about that here: #1727 (comment)