Site breaking on Safari

My site Conversion.ai is not loading correctly on Safari, but looks great on Chrome. I think it has to do with the CMS bc it’s breaking underneath each time I use it. Here’s a Loom video describing:

Here’s my read-only link: https://preview.webflow.com/preview/conversion-ai?utm_medium=preview_link&utm_source=dashboard&utm_content=conversion-ai&preview=a7b486786e18286e00f629f1708d64f9&mode=preview

Thanks for the PERFECT Loom video! Recorded a walkthrough in Safari that explores solving the rendering issue using flex instead of block-level parent elements for those Collections.

1 Like

Thanks McGuire! Changing from Inline Block to Display Block did remove the giant gap, but created a new problem – now the columns are breaking weird.

I discovered from tinkering around that adding a gap of 36px between columns fixes it in some circumstances. Random I know… but it doesn’t fix it everywhere. This seems to be a Safari-specific issue for CMS items in columns on Safari.

.element {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

Should sort this. It breaks after the element wrapper you choose to apply this to. It’s such a frustrating issue for me too. You’ll get issues still with Safari but it’s better.

You’ll find that although the breaking is right now, the top alignment will be slightly off. I’ve never found out why and spent some time last night looking at this very issue. Still under investigation from me though I’m afraid. I’m sure there’s a pure CSS fix here somewhere without having to introduce another framework for masonry grids.

Let me know how you get on.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.