▼
Streaming live at 10am (PST)

Choppy Interactions in Safari

#1

I have a lot of interactions on click for my “Learn More” buttons and “X” button to open and close projects in the work section of my portfolio site. In Google Chrome, these interactions work perfectly, but in Safari, they are extremely choppy and not smooth.

I have had a few issues with Webflow already that seem to be related to my device only, so I was wondering if someone could try out my site in both Safari and Chrome on their machine and let me know if they are experiencing similar issues, and if so, how can they be fixed?

Published Site: https://www.yaelhubert.com/
Public Share Link: https://preview.webflow.com/preview/portfolio-2-76786e?preview=3a26896c9dd0ff6ea29ce3fb9d59184e

#2

Hi @tarlyo,

I LOVE this site! We talked before and I can see you got everything so sweet, I can only see a slight jump on the interaction. I looked at the first Learn More. I tested a couple of options that smoothed it out on my machine.

  1. On each element that will move, try to add an “Origin” in css styles at the bottom - To tell interaction where to start moving it from
  2. Add a display property within the affect - Gives an extra display
  3. (Not necessary, just another tweak to test) - I’ve had jumpiness on my interaction tests in IX1, when using W & H. It’s noticeable when using scale & width/height, in my experience. I would test scale instead and you’ll have the origin set in css. It probably can make a difference in the slight jarring.

Just offering a fresh eye, hope it helps! But this site is so nice I can only see little tinkering things. There’s nothing major :slight_smile: Awesome!

Have a great one.

#3

Thanks for your quick and detailed response, @garymichael1313!

Can you clarify what you mean by adding and “origin” style? Is this done within the interaction in the “transforms” section or do you mean something else?

When you say to add a display property, do you mean setting the display to block, for example, on elements with a display of block set in the styles panel?

#4

Okay here’s a short video of it:

#5

Wow, thank you so much, this is so helpful! I will try that on all my moving elements!

#6

No problem, it seemed to smooth it out for me. I hope it works. See ya.

#7

Hey @garymichael1313, were you using Chrome or Safari when you checked out my site? I am still having serious problems with my interactions in Safari. Even my scroll to anchor link is choppy. Any ideas?

#8

I’m using Chrome to view the site.

#9

Hey @tarlyo

First of all, gorgeous site! great concept. I dig it!

Buuuut performance is a problem. In chrome it just takes forever (like half a minute or so…) to load the hero and heading animations) but the rest of the interactions are fairly smooth.

In safari super sloppy interactions as you described in your original post, — even for just going to the respective sections over in page linking , — plus the loading issue.
Not sure whats going on there. Currently trying to fix sloppy safari interactions myself.:male_detective::male_detective:

So all I can do is confirm the issue right, if I find something else I let you know…

Cheers
Chris

#10

I beg to differ. Three or four seconds in chrome here. Its just an svg animation anyway, not an image or interactions. But looks like this will vary from system to system.

Page navigation on the other hand is indeed not smooth. My guess is images are just too large?