Image Scale Interaction (Safari)

Design help Animations & Interactions
1

I have a page load interaction that enlarges an image. Pretty basic. Always worked in the past. Now, in Safari only, the image scales up but retains the original resolution, so everything remains blurry. Thought maybe it was a caching issue but clearing doesn’t resolve.

Firefox looks and works the best. Chrome has a little glitch where the fuzzy image changes to full resolution. Not ideal but it works.

I searched the forum and didn’t find any other comments about this glitch.

Tried changing the image to .svg hoping the vector would translate, but no good either.

Added screen grab and links below.

Blurry
Blurry1004×649 30.7 KB

Working share: https://preview.webflow.com/preview/skyrunner3?utm_source=skyrunner3&preview=5bf3354c9dcf0c75bc7485336815dd8d

Live page: http://skyrunner3.webflow.io/residential-home

2

Hey @Port_of_Folio

Yeah, that sucks. That’s the Safari default behavior, it’s like that even if you use vector art.
Have you tried making the animation the other way around? Instead of animating scale from 1 to 2, try to put the image already using it’s final size and animate from 0.5 to 1 instead.

1 Like
3

Awesome! That did the trick. Thanks so much! :+1:

4

You are welcome :wink: :

since you got the solution, I’m closing the topic.