Streaming live at 10am (PST)

Grids or sections behaves strange in safari

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??


Here is my site Read-Only:

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. :smiley:

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?

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

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.

1 Like

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

1 Like

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 :slight_smile: