Weird layout bugs in Safari

[jaimeiniesta]

My site uses TailwindCSS 3.4.10 and DaisyUI 4.12.10 and it renders great on Chrome, Firefox and Edge, but some pieces look weird on Safari 17 (macOS).

For example, this report:

https://rocketvalidator.com/s/971b8c10-be44-48c1-81a9-19e69a80072d

If you go to the bottom you'll see this:

Another issue is at the footer of https://rocketvalidator.com where the theme switcher is:

Any idea where the problem could be?

[jaimeiniesta]

I think this is related:

https://stackoverflow.com/questions/78335449/safari-strange-issue-with-flex-and-column-and-grids

The example renders different in Safari

https://play.tailwindcss.com/uzqrEtPtKX

[saadeghi]

I don't have Safari 17 to test but I can't see any of these issues on Safari 18.1

• Are you using any extensions which may change the page content?
• Is this issue also happen in a private tab?
• Can you inspect the problematic part of the page to see what element is taking that much space or pushing other elements maybe?

[jaimeiniesta]

Hi, I've installed Safari 18.0 beta and the issue is fixed. Thanks!

For the record, in Safari 17 I didn't have any extensions and it also failed in a private tab.