So I’ve had this stuff happen to me on multiple sites now, so I am trying to get to the bottom of this.
My sites work smoothly and as intended in Chrome and Firefox, however I have had massive issues with getting my sites to display properly in Safari.
Most notably, Sections will move out of place, ignore fixed margins, sometimes images will warp in size. Content will bleed into other sections or out of the frame.
I searched the forum and the web for this to no avail other than “it might have to do with Safari not liking min-width / max-width and % units”.
Sometimes on other pages/sites it worked better after I set a fixed static px value for the dimensions of sections and images. But this surely can’t be the solution? Does Safari really ignore min-/max-height properties and % values?
The page is “Startseite”.
It’s still a work in progress (please ignore the design itself, I am working from artworks provided to me) but the issue happens as shown in the attached screenshots.
It seems as if the three grids are pushed out of place for no apparent reason.
Can anyone point me in a direction here? Thanks a lot
EDIT: Nobody reacted to this thread, but the issue was in fact Flexbox not working correctly with Safari. I started using Grid for everything which solved the issues entirely. In case someone sees this and has similar issues.