Search code examples
cssangularionic-frameworkionic5

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

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:

enter image description here

Here is how it looks when after the side menu close: enter image description here

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!

    enter image description here

    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;
}