Safari hover animation only happens once

Design help Animations & Interactions
1

Hi everyone,

I would love your help!!

I’ve set up hover-in and hover-out animations for buttons and image labels and in Google Chrome they work fine. In Safari they work on the first hover but then don’t work for every hover after (unless I reload the page).

One example is my nav ‘Menu’ button hover state.
Another example is the image labels on the ‘Portfolio’ page.

Can someone tell me what’s going wrong?

Here is my read-only link:

https://preview.webflow.com/preview/jake-dennis-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=jake-dennis-portfolio&preview=f1b2bed953eac9f9869ee8cbf6dfed33&workflow=preview

Thanks so much for the help!

2

I do not know if this can be a reason but you do not have set init state. Give it a try as according to WF docs you should have INIT states.

CleanShot 2024-08-03 at 15.09.50
CleanShot 2024-08-03 at 15.09.50250×1239 41.2 KB

3

Thanks for the reply! I’ve tried setting an INIT state but unfortunately it makes no difference… Any other ideas?

4

hi @Henry_Tuck it looks that your site jake-dennis-portfolio.webflow.io is not published yet as returns 404. This open the question "how do you know that it not works in Safari ?

Anyway, the best way to get help is to follow the forum post guide.

When posting please:

  • Required: Share your project’s Read-Only link and live site’s Published link
  • The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is IMPORTANT to share this link, as custom code (eg. javaScript) does not run in the Designer.
  • Describe issue in detail including what page, section and/or element is localized
  • Upload as many screenshots as possible or provide screencast videos to help others help you faster
  • Add a description and/or post a link to a working example of what you’re trying to achieve
  • Reply to users by tagging using the @ sign followed by their forum username like this: @forumMemberName

Publish your site and check again, if issue persist share published link .

5

Hi there, it is published to a live domain jakedennis.co.nz with a password. This password is ‘jake’ thanks.

6

hover animation to reveal photo title works in Safari as expected. What buttons you are talking about on what page?

BTW: check your console as there is many 404 errors related to fetching data.

Why you are creating a new portfolio site as your current website looks IMO much better.

7

I’m glad the hover states are working.

The 404 errors seem to be to do with blocks that have conditional visibility set so this isn’t a concern for me — certain blocks are only to show based on a drop-down field in the CMS.

What current website are you referring to, sorry?

8

to website you have in link on your new website login