translucent header in modal misbehaving

[jongbonga]

Getting this issue with translucent ion-header.

The header/toolbar background appears solid on first render, but after a good shake, the transparency works. It does not get the transparency with slow drag

Screen.Recording.2026-01-31.at.12.05.31.AM.mov

[rdlabo]

Thanks for reporting the issue!

From what I can see, this looks less like a theme-related problem and more like a potential issue in Ionic Framework itself.
Could you confirm whether the behavior still happens if you remove this theme entirely?
It would be really helpful to know whether the issue goes away without the theme, or if it persists.

Thanks!

[jongbonga]

Hi @rdlabo, the issue goes away without the theme, [translucent]="true" works well on ionic only

[rdlabo]

Sorry for the late reply.

I did some testing, and it seems this issue is not specific to this theme. I was able to reproduce the same behavior even after removing the theme.

It appears to be related to the following Ionic issue:
ionic-team/ionic-framework#18589

So this may actually be an Ionic Framework issue rather than something caused by the theme.

If I’m mistaken, could you please share a minimal reproduction project where the issue occurs with this theme applied? That would help investigate further.

[jongbonga]

Hey @rdlabo see another video on device.

Any idea what could cause this?

ScreenRecording_03-18-2026.14-17-58_1.mov

[jongbonga]

It's happening with another app of mine, too.
My workaround is

@ViewChild(IonContent, { read: ElementRef }) content?: ElementRef<HTMLIonContentElement>;

ionViewWillEnter() {
  requestAnimationFrame(() => {
    void this.content?.nativeElement.recalculateDimensions();
  });
}

[rdlabo]

As mentioned above, this is a known issue in Ionic Framework itself:
ionic-team/ionic-framework#18589

The fact that calling recalculateDimensions() works around the problem also points to Ionic’s internal content dimension calculation and lifecycle behavior, which this theme cannot change or fix. Please follow the upstream Ionic issue for a framework-level resolution.

Since there is no actionable fix we can make in the theme, I’m closing this issue.