Menu works perfectly in Safari but not Chrome?

Question

I am having trouble figuring out why my site menu shows up differently over browsers. Screenshots are below.

Site is here.

Update: Figured out what is causing it. It’s these lines of code in the head. Still unsure why it would mess up the menu in chrome but not safari.

<style>
.navigation { 
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
</style>

Can you upload the photo of how it shows on Safari? But you're using ``webkit`` so I don't think there would be a problem with chrome. — Amini, Jul 20 '21 at 17:48
Hi @AmirrezaAmini just uploaded the screenshots. Thanks for taking a look! — Terrance McArthur, Jul 20 '21 at 17:50
But I don't think that ``backdrop-filter`` is related to this kind of problem. I mean you're applying blur, why would be there a problem with how it shows the navbar? — Amini, Jul 20 '21 at 17:54
i think the problem is connected to z index more than to filter — Dolev Dublon, Jul 20 '21 at 17:55
That's why I am so confused. If I remove that code the menu works exactly as it should in chrome. — Terrance McArthur, Jul 20 '21 at 17:56

score 1 · Accepted Answer · answered Jul 20 '21 at 18:01

1

Just do this.

.full-screen-menu {
  width: 100%;
  height: 100vh;
}

Good luck Mr. McArthur!

answered Jul 20 '21 at 18:01

Amini

and you can disable ``z-index``. No need to use it. – Amini Jul 20 '21 at 18:02
That did it! Silly mistake on my part. Thanks! – Terrance McArthur Jul 20 '21 at 18:11
Accept this answer I need reputation lol. – Amini Jul 20 '21 at 18:15
Sorry, I'm new to stack overflow haha – Terrance McArthur Jul 20 '21 at 18:18

1 Answers1