Skip to content

bug: ion-toast does not remove backdrop-no-scroll from body when dismiss #30112

@tobiloeb

Description

@tobiloeb

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

We are currently migrating to Ionic 8.4.1 from Ionic 7 with Angular 18.2.

Now we are facing following issue with ion-toast:
When an ion-toast will be present the css class "backdrop-no-scroll" is added to the body. And the class will be removed from body after the toast dismiss. This was the behaviour with Ionic 7 and with Ionic 8. But with Ionic 8.4.1 the class stay there and is not removed from body after the toast dismiss.

For me this seems to be a bug and I am able to reproduce this very easy. With the following code you can reproduce the issue. Just take a look at the HTML (body in iframe). After you change the ionic version to 8.4.1 in the package.json and reload the code you see the difference.

In case this is a new feature or I did something wrong, maybe someone can tell me how to remove this class on my one. :)

Expected Behavior

The "backdrop-no-scroll" css class is removed from body when toast dismiss.

Steps to Reproduce

  1. Got to: https://stackblitz.com/edit/angular-ywh4p1-cszqn3rp
  2. Take a look at the HTML, the class is removed from body after the toast dismiss (in the iframe)
  3. Go to package.json and set ionic version to 8.4.1 - wait for loading dependencies
  4. Reload the page and take a look at the body tag (in the iframe) again.

Code Reproduction URL

https://stackblitz.com/edit/angular-ywh4p1-cszqn3rp

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/tobias/.nvm/versions/node/v22.11.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.4.1
@angular-devkit/build-angular : 18.2.12
@angular-devkit/schematics : 18.2.12
@angular/cli : 18.2.12
@ionic/angular-toolkit : 12.1.1

Capacitor:

Capacitor CLI : 5.7.0
@capacitor/android : 5.7.0
@capacitor/core : 5.7.0
@capacitor/ios : 5.7.0

Cordova:

Cordova CLI : not installed
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

cordova-res : not installed globally
native-run : 2.0.1

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      close