ionic 5 ios dark theme shows shadow in the header on menu bar open and close

Issue

I am trying to figure when the menubar is closed in ionic ios it shows some shadow styling in the header.

I looked into inspect element but couldn't figure exactly on what element that is being applied.

It seems it is around the .toolbar-container element! but not able to figure where exactly or how to fix that!

Here is a screenshot of captured transition and you can see the shadow:

Here is how it looks when after the side menu close:

btw this is the default dark theme for ios that comes with the ionic angular side menu.

Solution

Alright, I found it:

It was the .header-background when the menu is open (.header-collapse-condense-inactive) which was setting the backdrop for the header to be blur!

I just overwrite that with backdrop-filter: none !important; added the following CSS globally, fixed my problem!

.header-collapse-condense-inactive .header-background {
  backdrop-filter: none !important;
}

Answered By - Lahar Shah