Streaming live at 10am (PST)

Inconsistent animations across browsers

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

Here are screenshots of the website live in safari and chrome. The first screenshot shows how the menu should be operating. Any advice on where I slipped up would be incredible.

Thanks in advance,
Flynn.

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

@avivtech, Cheers for the swift reply. The main problem I’m encountering is the invert filter. Everything else is working smoothly without having this involved. I only come across problems when I have this filter enabled - as I say, it works smoothly on safari but still has several problems with chrome, firefox, opera, edge etc.

I still find the same problem occurs on the first click in the browsers that don’t work. There are no differences between when it is opened and closed the first time to when this happens the second time. The other part that truly puzzles me is that the grid seems to lose form, along with the cart pop out. As I say, they all work smoothly in safari regardless of this filter - yet the other browsers encounter errors when they have the invert filter applied. Without it the menu runs smoothly.

Here are the website links for reference:
(note: they have been rolled back to last night before I attempted to troubleshoot myself.)
www.backyards.nz
backyards.webflow.io

I greatly appreciate the help,
Flynn

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