bug: overlays block scroll as soon as they are created, even if they do not get presented

[almothafar]

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

When I create a new Alert using an Alert controller like

  constructor(private _alertController: AlertController) {

      const alert = await this._alertController.create({
        header: `Just Header`,
        message: `Just a Question`,
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel',
            cssClass: 'secondary'
          },
          {
            text: 'Continue',
            handler: () => {
              this.doSomething();
            }
          }
        ]
      });

class backdrop-no-scroll got added to the body and preventing scroll in the web version of Ionic.

Expected Behavior

That class should be added after I call alert.present() I think, not while creating the alert, as for example, I can initialize the alert and alert.present() in a specific condition, instead of having all creation and presenting in the same code block.

Steps to Reproduce

Just create an alert and don't call it or make a condition to call it.

      const alert = await this._alertController.create({
        header: `Just Header`,
        message: `Just a Question`,
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel',
            cssClass: 'secondary'
          },
          {
            text: 'Continue',
            handler: () => {
              this.doSomething();
            }
          }
        ]
      });

      if (condition) {
        alert.present()
      }

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.17.1
Ionic Framework : @ionic/angular 5.8.0
@angular-devkit/build-angular : 12.2.6
@angular-devkit/schematics : 12.2.6
@angular/cli : 12.2.6
@ionic/angular-toolkit : 4.0.0

Cordova:

Cordova CLI : 10.0.0
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

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

System:

NodeJS : v16.4.1 (/usr/bin/node)
npm : 7.23.0
OS : Linux 5.10

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I can reproduce this behavior. When overlays are created, we create an ion-backdrop component as well. As soon as it is created, it blocks scrolling: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/backdrop/backdrop.tsx#L16-L18. Normally this is good, but in the event that you do not present the overlay users should still be able to scroll.

[abdel-ships-it]

@almothafar Did this cause any weird scrolling issues for you in some scenarios? Like not being able to scroll or interact with the app?

[abdel-ships-it]

@liamdebeasi I'm suspecting this is causing scrolling issues on iOS if you scroll really fast after the application is loaded. I have encountered this problem in two different iOS projects and its quite hard to reproduce. But when I reproduce it, I can find traces of this behaviour in the DOM such as backdrop-no-scroll class being present on the body.

Could be a false negative, but I'm curious to hear your opinion. I have also found mentions of the issue I'm describing here

• css - webkit overflow scrolling freeze scrolling after closing a modal - Stack Overflow
• angular - Ionic 4 scroll not working properly on iOS - Stack Overflow

I have also made a video of the problem happening, and had show compositing borders toggled on in safari dev tools. Pay attention to the number going up in the top left corner as I scroll. And as per webkit documentation here this does the following.

will draw borders around and indicate the number repaints for each layer.

Meaning there is a repaint every scroll when its not working. And when it does eventually scroll, there is no repaint. I'm not sure if this is related but thought its an interesting observation

Video #1

ionic-6-scroll-bug.mov

Ionic CLI                     : 5.4.16 (/Users/abdel/.npm/_npx/864a9e3c2cd0cf50/node_modules/ionic)
Ionic Framework               : @ionic/angular 6.0.13
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics    : 12.2.13
@angular/cli                  : 12.1.4
@ionic/angular-toolkit        : 4.0.0

The repaints in the video seem to be occurring on two elements

1. The page which contains the ion-header & ion-content (app-customer-details)
2. ion-buttons in the ion-header

Safari layers tab

[filipencus]

Hi guys,
I understand there is no official solution yet. But do you know some workaround to apply until we get a solution?
Our clients are constantly reporting this issue. Thank you so much. I appreciate your help. @liamdebeasi

[liamdebeasi]

Thanks for the report. This was resolved via #28415, and a fix will be available in the upcoming major version of Ionic Framework.

[ionitron-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.