Safari Card Grid Error

I’m currently experiencing this issue in safari only with a two column grid made up of these two cards with an image and text box inside. Works fine in chrome, but in safari it does this weird thing. Any help would be much appreciated


Here is my site Read-Only: https://preview.webflow.com/preview/black-sheep-foods?utm_medium=preview_link&utm_source=dashboard&utm_content=black-sheep-foods&preview=9a125a5c38fa1d831046a7844e719db1&mode=preview
(https://preview.webflow.com/preview/black-sheep-foods?utm_medium=preview_link&utm_source=dashboard&utm_content=black-sheep-foods&preview=9a125a5c38fa1d831046a7844e719db1&mode=preview ]2)

Hey @ctbrand8 and welcome to the Webflow community :wave: :webflow_heart: :sheep:

The link you shared is your live site (on the webflow domain) if you could share your read-only here too, that would be super useful and will allow users to help using your own site.
(No-one can save any changes they make)

Hmmm, as a full on meat eater this lamb does sound intriguing! I was staying on Treat Ave recently in SF too! :confounded: If only I’d have known! :smiley: I’ll make sure to try some next time I’m in town :smiley:

Hi @magicmark Thanks and my apologies. I’ve updated my original post with the Read Only Link

Below is the Read Only Link:

https://preview.webflow.com/preview/black-sheep-foods?utm_medium=preview_link&utm_source=dashboard&utm_content=black-sheep-foods&preview=9a125a5c38fa1d831046a7844e719db1&mode=preview

No worries @ctbrand8 easily missed :smiley:

So this is weird! It’s to do with the pre-made Fade in interaction. I will report the issue with our engineers who will be able to take a look.

Meanwhile…

I’ve tested making the interaction manually, published locally on my machine and used with safari to check it works, and it looks good to go.

In case you haven’t done this type of interaction before, I’ve done a quick walkthrough so it should only take 2 minutes to complete and you’ll be moving forward again.

Walkthrough :walking_man::video_camera:

Video: 2 mins with sound
CloudApp

I do appreciate that the pre-made interactions are convenient and should be working, so thanks for reporting this and once a fix is pushed I’ll let you know back here.

Thanks @magicmark. The error still seems to happen on Safari, even when I recreated the interaction from scratch, but I’ve removed the transaction all together and the error goes away so I’ll just go with that. Thank You!

Hmmm, that’s weird.

I had a play with again after. I think it may be to do with the set up of the grid + wrappers + interaction. I can’t reproduce it when I build a new page.

The explicit max-width sizes you’ve set on some of the wrappers is possibly causing an issue somewhere. If my guess is correct, it only happens on certain browser sizes. It’s kind of like the browser is trying to move stuff differently to what’s been set in Webflow.

If you need that interaction, it may be worth experimenting with %, VW, or VH based sizing. It will also give you a more responsive site than using pixel based sizing.

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