Interactions work in Chrome but not Safari

Design help Custom code
1

Hey guys

So I built this trigger that when you click it another image will appear. It works perfect in Chrome but when I tested in Safari it didnt work. I know some browsers are a little different but its not like I did anything super crazy. Its a simple click that raises the opacity of an image.

Here is the site:

http://the-small-web-shop.webflow.io/about

Scroll down to where the Image of “Max Lighthalls” face is and click the smile face icon. Try it in chrome and safari.

If anyone can please help that would be wonderful. Im trying to release the finish site soon and I cant be having small issues like that.

2

Without the sharing link it’s not easy to help :wink:

But maybe your second image has no dimensions set and chrome and safari don’t have the same defaults. Try to check if the second image has

  • dimensions
  • display block
  • high z-index
1 Like
3

my bad I thought you could tell with the link, lemme figure out how to add sharing link.

4

https://preview.webflow.com/preview/the-small-web-shop?preview=b22c5ceadbd914935b251d32c9c22003 let me know if that works. I had all that set. Strange that it works great in chrome.

5

Not strange actually. When browsers face elements lacking specifications, they apply default specifications. And it’s up to them. It’s not rare that Chrome decides to give default dimensions to elements that don’t have some set, and some other browser won’t, not rendering the element.

And here we go: you see when an element has this dashed border?

http://vincent.polenordstudio.fr/snap/y76o9.jpg

It means Webflow tells you the elements has no dimensions and it is given default in the designer for you to be able to see it.

Do this

http://vincent.polenordstudio.fr/snap/g7rxw.jpg

http://vincent.polenordstudio.fr/snap/5k281.jpg

Mostly works as expected, adjust from there.

1 Like
6

Honestly I don’t even know why it worked in chrome :smiley:

1 Like