Grids or sections behaves strange in safari

[Klaus_Dyba1 (Klaus Dyba)]

Hi! I work on my first site and all looked well until I checked it on mac safari…

Somehow all sections (or the grids inside) act strange. They overlap each other. It’s just a mess.

attached are 2 screenshots. It happens when you change height/width of browser window. The sections overlap. It should not overlap. In chrome it works fine.
Does anyone know what the reason is??

Regards,
Klaus

---

Here is my site Read-Only: https://preview.webflow.com/preview/wethepeoplebmx2021?utm_medium=preview_link&utm_source=designer&utm_content=wethepeoplebmx2021&preview=2b8bfd4ad94f8e24170640b037734e73&mode=preview

grid templates

[Davidlin_ch12 (David Xin Long Lin)]

Hey Klaus

All your category-image-wrapper elements have the height set by the margin-top: %-value. But on the last element you have also assigned a height value to 100%. I think that is causing some problems. Try changing it back to auto and let me know if that helps.

[Klaus_Dyba1 (Klaus Dyba)]

Thanks, I changed it but still not working. The whole behavior is strange. When I change the height of the browser window the content moves up and down. It should be responsive only by changing width of browser window. By height it should stay at the same position. Maybe I should try just flexbox and not grids?

[Davidlin_ch12 (David Xin Long Lin)]

Hmm, looks like I also did the following on the grid element:

[Klaus_Dyba1 (Klaus Dyba)]

Thank you so much! Yers it was the height of the grid. I set it to auto and not 100%. Then it worked. Strange that chrome didnt have a problem with it.

[Davidlin_ch12 (David Xin Long Lin)]

Yep very strange indeed. Glad we found a solution for it though. Happy designing!

[Joerg (Jörg Frank)]

Had the same Problem. I’ve built up a masonry grid with a Lightbox feature and in a Text column grid. In Chrome everything worked really fine, but in Safari it was totally weird. Especially at the bottom of the grid, the parent container enlarged to a extreme large height.

The solution was to set the images inside the Lightbox onto “Block”, instead of the initial “Inline Block”. After that, everything worked fine.

Hope, it helps