Undesired frosted effect on Ionic App in iOS

Issue

Hello and thanks in advance.

I'm converting an Ionic 3 project into Ionic 5, and I'm actually rebuilding the whole app, only copying the templates and applying updates in order to adapt to new environment. I'm getting good progress and I sent it to Firebase hosting to start testing and shared the link with some users.

Then, I was surprised by a frosted glass screen on iPhone devices. The strange thing is that this project never used such effect (I was working in the previous version too), and I can't reproduce this in my environment. I have no clue why this is happening.

Why would ever an Ionic App (running on Safari/iOS) apply such effect without being required to do so? How do I remove this stuff?

Solution

In case somebody get this problem, I've found that my ion-header had translucent = true, which was rendering a background on iOS devices. So the solution was to remove the translucent stuff.

Answered By - Bruno Polo