In Chrome at less that 100% zoom, cdk-global-scrollblock class is incorrectly added to html element with block scrolling strategy

[MarkoSkugor]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

10

Description

In Chrome Version 102.0.5005.63 (Official Build) (64-bit) at less than 100% zoom (tested at 90% zoom), when the _canBeEnabled method in block-scroll-strategy.ts executes it incorrectly determines that the cdk-global-scrollblock class should be added to the html element. This causes an unnecessary scroll bar to appear on the page. This can be reproduced in the Angular Material docs page for the Dialog using the examples there.

Reproduction

Steps to reproduce:

1. Go to https://material.angular.io/components/dialog/overview in Chrome
2. Zoom out to 90%
3. Open a dialog

Expected Behavior

The cdk-global-scrollblock is not added to the html element

Actual Behavior

The cdk-global-scrollblock is added to the html element, causing an unnecessary scroll bar to appear

Environment

• Angular: 14.0.1
• CDK/Material: 14.0.1
• Browser(s): Chrome Version 102.0.5005.63 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 Enterprise Version 20H2

[SebLeich]

Is there a solution available for that yet?

[liesahead]

Still relevant

[rabie-khlifi]

you can just add

.cdk-global-scrollblock{
    overflow-y: hidden;
}

to the global css file to force it to be removed

[Nzaoui]

you can just add

.cdk-global-scrollblock{
    overflow-y: hidden;
}

to the global css file to force it to be removed

I think it would be best to change it to: overflow-y: auto (which should be by default, instead of "scroll"...) so that it could handle the cases for protruding elements too