You might be running into a similar issue I had. Make sure all of your IonHeader content is within an IonToolbar. You can have multiple IonToolbar elements in your header. If there is some content outside a IonToolbar you will get weird transition issues.
Otherwise, yes, you can have a fixed header without using IonHeader. Just use normal CSS.
Unfortunately I discovered that I still run into issues in certain situations. I’m wrapping everything fixed in headers and toolbars, but I still get the issue with multiple visible layers during transitions.
I have a funny quirk in my app. There are pages A, B and C.
A → B causes no issues
A → C causes no issues
B → C does the weird stacking thing
B → A (backward) causes no issues
The only difference with page B is that there’s only one toolbar present in the header. I tried adding a second, empty toolbar, but that didn’t fix the problem. I think it might be related to the height of the header. Perhaps it’s also a matter of what’s being stacked.
I was thinking about going with regular CSS, but I think the scrollbar will be an issue.
I think I begin to grasp what’s going on.
ion-app, ion-page and ion-header don’t have a background but ion-toolbar and ion-content do.
I want to work with a gradient background, so this is complicating things. But I’m starting to see where the issues arise. It’s a matter of what elements are translated and being changed in opacity, how they’re stacked (forward vs backward), and if elements are involved that are more notable at reduced opacity than others.
A solution might be to give ion-page a background and write a custom animation. I’ll investigate further.