Interactions not working in Safari 2021

Hey guys, I was getting very close to doing a soft launch today until we realized that our interactions werent working in Safari.

I can’t seem to figure it out. Does anyone have a solution or things//places I should check?

thought I would drop the read-only link here: https://preview.webflow.com/preview/confection-perfection-cakes?utm_medium=preview_link&utm_source=designer&utm_content=confection-perfection-cakes&preview=533e387f12f833866fe49adeed60a1f9&pageId=5fc93b7c145830e83aa7a8a3&itemId=5ffe59131c2ee9b7e84c58d9&mode=preview

I’m realizing some interactions work while some don’t. The main one I’m having issues with is the hide/show on the products template ecommerce page.

Any help would be greatly appreciated!

Well this is worrying. What version of safari are you using?

Hi David.

I had a similar issue yesterday.

https://discourse.webflow.com/t/all-my-interactions-has-disappeared-and-im-just-days-away-from-launching-this-ecommerce-site/153293/9

The newest version. I just updated my Mac to the newest is as well

Yeah I saw this. I duplicated the site and it’s still not working :man_shrugging:t2:

What you have shared is not your read only link, it’s your published site on the staging domain.
Share your read-only so we can see what’s happening under the hood:

it was workinig as a read-only for me, but ill try again

https://preview.webflow.com/preview/confection-perfection-cakes?utm_medium=preview_link&utm_source=designer&utm_content=confection-perfection-cakes&preview=533e387f12f833866fe49adeed60a1f9&pageId=5fc93b7c145830e83aa7a8a3&itemId=5ffe59131c2ee9b7e84c58d9&mode=preview

Your site is quite complex. Could you be a bit more specific with the class of the element(s) you are trying to animate and the effect you are trying to achieve?
Is the animation working as you want it in Chrome both on the designer and published site?
And on Safari, is it working in the designer but not on the published site?

One comment I would make is this: If you are trying to animate div-block-910 to hide on click/tap, you should rethink your structure and trigger: At the moment your trigger is text-block-100, which means the pop-up will only hide if the user clicks exactly on that text, and nothing will happen if they click anywhere else on the pop-up.

This is the first hide/show animation I found on your products template page, if it’s something else that you are having trouble with, please point us to it :slight_smile:

Sure thing! Yeah my organization got a bit messy bc I was getting frustrated with things so I was just trying to get it to work.

Basically I have some JavaScript that forces a 2nd click to get the user to go to the next page. It’s a product/add to cart funnel. I’m trying to do everything in webflow without any integrations. A problem we had was the amount of variants so we just made different a different page for the larger variants (there are like 60 or 70 cake flavors to choose from. on top of that if they order anything larger than a single layer cake they have to choose a second flavor for the other tiers).

The issue I had was if they dont choose a cake size or something from the drop down it still moves them to the next step without adding to cart.

To fix this, I have the ATC buttons hidden until they click on the drop down. This is the main interaction issue I’m having.

In Safari when you click the dropdown, the buttons don’t show and I cant figure out how to get them to. The button is “Button 13”. It has display-none until the dropdown is clicked, then it should pop up.

Like I said it works totally fine in chrome

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