Hidden attribute ignored after upgrade to v7


I just upgraded from version 6 to version 7 and noticed, that all components where the “hidden” attribute is set (either directly or through Angular) are visible. After some debugging I noticed, that the previous version contained the following CSS settings:

ion-route, ion-route-redirect, ion-router, ion-select-option, ion-nav-controller, ion-menu-controller, ion-action-sheet-controller, ion-alert-controller, ion-loading-controller, ion-modal-controller, ion-picker-controller, ion-popover-controller, ion-toast-controller, .ion-page-hidden, [hidden] {
    display:none !important

In version 7, this is missing.

Is this a bug, or is there any reason for removing this from the CSS settings?

The custom hidden attribute was removed in Ionic 7 in favor of the hidden attribute built into the browser: ionic-framework/BREAKING.md at 6ffbdbb3b2b69290cf25753d535bc7483bd7c6e8 · ionic-team/ionic-framework · GitHub

If you want the old behavior, you can add the following to your global styles:

[hidden] {
  display: none !important;
1 Like

Thanks. Apparently, I missed that one in the release notes.

1 Like

Would be great to have this in the Upgrade Guide.