Ionic-framework: bug: Issue with Ion Header in Dark mode

[assman]

Hi

I am trying to manually toggle dark mode on my app using an Ion Toggle. Most of it works fine, however if you try to scroll down, the Ion Header has a weird behavior. Tried this on Safari 13.1.1 on Catalina and Safari on iOS 13

This is the repo : https://github.com/assman/ionic_demo

[assman]

I have found a similar issue on the Ionic Demo page https://ionicframework.com/docs/

Tested it on chrome and it works fine, it’s something to do with safari

[liamdebeasi]

I am able to reproduce this. This does not seem to be a regression as the behavior is present in previous versions of the framework too. Looking into this some more.

edit: This is an issue only with manually toggling dark mode themes. This issue does not happen when toggling dark mode via iOS system preferences.

[assman]

I am able to reproduce this. This does not seem to be a regression as the behavior is present in previous versions of the framework too. Looking into this some more.

edit: This is an issue only with manually toggling dark mode themes. This issue does not happen when toggling dark mode via iOS system preferences.

Yes you’re right, it only happens when manually changing. Can’t really figure out what it could be

[liamdebeasi]

This appears to be a bug in WebKit. We will look into reporting this to the WebKit team, but here are some possible workarounds for now:

1. Rely on the OS-level dark mode preferences. This issue does not seem to appear when toggling dark mode via the iOS system preferences.

2. Force a repaint on the toolbar when manually toggling dark mode in your app. Here is what that would look like in your app:

requestAnimationFrame(() => {
  toolbar.style.setProperty('z-index', '1');
  requestAnimationFrame(() => toolbar.style.removeProperty('z-index'));
});

toolbar is a reference to your ion-toolbar element on the page. It looks like you only need to do this for the toolbar on the page where you toggle dark mode. This forces WebKit to do a re-paint, which causes the updated styles to take effect.

[assman]

This appears to be a bug in WebKit. We will look into reporting this to the WebKit team, but here are some possible workarounds for now:

1. Rely on the OS-level dark mode preferences. This issue does not seem to appear when toggling dark mode via the iOS system preferences.

2. Force a repaint on the toolbar when manually toggling dark mode in your app. Here is what that would look like in your app:

requestAnimationFrame(() => {

  toolbar.style.setProperty('z-index', '1');

  requestAnimationFrame(() => toolbar.style.removeProperty('z-index'));

});

toolbar is a reference to your ion-toolbar element on the page. It looks like you only need to do this for the toolbar on the page where you toggle dark mode. This forces WebKit to do a re-paint, which causes the updated styles to take effect.

Thanks bro

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.