Inconsistent animations across browsers

Design help Animations & Interactions
1

Hey team,

I’m rather new to Webflow and web design as a whole. Late last night I stumbled across an issue that was persistent across every browser bar safari. Upon opening the menu I have an animation that inverts the colours of my header and the corresponding overlay. This works like a charm in safari and seems to function perfectly, however coming to chrome the grid and interactions seem to get half way then call it a day. This is my first project so it’s a tad sloppy, but I’ve left the public link down below so you can see where I went wrong.

I have considered changing my animation to individually alter text and background colour, yet feel as if that could also pose its problems. Would love to hear any advice or solutions.

(Note: I have trialled multiple browsers in incognito with cleared caches to no dismay. The only browser capable of opening the element correctly is safari. I originally edited this in Safari — this may have something to do with it.)

Cheers!

Here is my public share link: https://preview.webflow.com/preview/backyards?utm_medium=preview_link&utm_source=designer&utm_content=backyards&preview=02787f7e25c890ffed61cdb767c81308&mode=preview

3

Hi @Flynn,

I think you have some inconsistency between the open & close interactions of the menu. I believe so since the first opening looks one way, and all the following opening of the menu looks different.
Probably some elements aren’t moving back to where they were or having the same properties.

*keep in mind that an initial state of an element only applied to the element once on page load! so in order to have that property as a default you need to apply it as a non initial state with timing of 0

6

Im using the new edge, I see solid white background.
Is that what you want?