div tables overlapping in Safari?

[jabbamonkey]

Having a CSS issue with my site. Someone sent me some screenshot from their Macbook using Safari. I have not been able to duplicate the issue using online Safari browser testers, so this is difficult for me to troubleshoot (especially since I am PC passed). I wanted to see if someone else could help.

Basically, for the user, the "div tables" are all OVERLAPPING. I have included a link to the page (which works fine in FireFox and Chrome), and also screenshots of the issue at the bottom...

Magic Item Shop for D&D 5e

Random inventory, pricing, weights and other info for a D&D magic item shop or collector; great for role playing games.

www.thievesguild.cc

Below is a screenshot of how the page SHOULD look (Chrome), with a screenshot of the issue right below it (the user's Macbook Safari screenshot) ...



Anyone have any idea why this is occurring? And how to fix it?

 

[tomliv]

Looking correct in Safari 17.4

CleanShot 2024-03-18 at 11.56.34

Screenshot uploaded to CleanShot Cloud

cln.sh

 

[jabbamonkey]

Thanks. Anyone else see the issue? (or, can you see a possible error in the code that would cause this)?

 

[tomliv]

I had to go back to MacOS Catalina Safari 13.1 to see the issue. I'd say lack of some flex support at that point.

 

[cbreemer]

Looking absolutely fine on iOs Safari 14.7
As @tomliv suggests, the user's MacBook OS (and therefore also Safari) may need to be upgraded.