Hi everyone,
I’m animating a landing section of the website out of view. When scrolled past it, I want to hide it by reducing opacity to 0% and setting the display to none. In Chrome and Arc it works great, but in Safari there’s a small jump/glitch which I have no clue where it’s coming from. I appreciate it may be to do with the way the browser re-reads the layout after the section is set to none but it’s super odd. Is there a work around?
Thanks a lot,
A
Here is my public share link: [LINK](Webflow - Ian Chalk Architects)
(how to access public share link)
Hi A,
For Safari-specific animation issues with opacity and display, here are some common solutions:
Safari can be sensitive to certain CSS animations, particularly with opacity transitions. Try adding the -webkit prefix to your animation properties and ensure you’re using transform: translate3d(0,0,0) or will-change: transform to trigger hardware acceleration. You can also try setting backface-visibility: hidden on animated elements.
If you’re using Webflow’s built-in animations, make sure your timing and easing settings aren’t too aggressive. Sometimes reducing the animation duration or adjusting the easing curve can help smooth out Safari-specific issues.
For opacity animations specifically, consider using transform: scale(1) instead of opacity: 1 for better performance in Safari. You might also want to check if your animations are conflicting with any interaction triggers or load triggers.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
I still need assistance- any help would be appreciated!