▼
Streaming live at 10am (PST)

Interactions on load - Opacity problems

#1

Hi people,

I'm currently building a website on Webflow, have completed my home page and now looking to add some subtle interactions. I wanted the text on my first slide to fade in upon load, and achieved this fairly easily. The problem is, once published, this happens (Excuse the terrible gif it doesn't even repeat once it's loaded):

This doesn't happen in the browser preview, only when it is published. Basically if you missed it, the opacity SEEMS to get to 100%, then upon the end of the animation it suddenly jumps and the text becomes bold and everything is exaggerated?

Could anyone help me here?

Many Thanks

#2

Seems like there probably won't be a reply here. To all that are having the same problem, it is a bug that only shows on Safari. I viewed my published site on Firefox and it works fine. Slightly annoying as a lot of Mac users swear by Safari so anyone with Safari will be greeted with an effect that doesn't work haha. Oh well!

#3

You never know :wink:

It's difficult to figure that out only with a GIF.

But you may have "flashing antialias issue" with Safari. Some elments gets redrawn by the browser upon new events.

Could you test this first: place the element that should not flash on top of the z-index hierarchy. Give it the highest value. See if it happens again. If it does there may be some custom code to help forcing the antialias at all times.

PS I changed your post to "design help" because it's not a Webflow bug, that happens even when you hand code. That's a Safari behavior.

#4

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