Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
1 task done
MarkoSkugor opened this issue Jun 10, 2022 · 4 comments · May be fixed by #30548
Open
1 task done

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

MarkoSkugor opened this issue Jun 10, 2022 · 4 comments · May be fixed by #30548
Labels
area: cdk/scrolling P4 A relatively minor issue that is not relevant to core functions

Comments

@MarkoSkugor
Copy link

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.

image

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
@MarkoSkugor MarkoSkugor added the needs triage This issue needs to be triaged by the team label Jun 10, 2022
@zarend zarend removed their assignment Jun 22, 2022
@zarend zarend added area: cdk/scrolling P4 A relatively minor issue that is not relevant to core functions and removed needs triage This issue needs to be triaged by the team labels Jun 22, 2022
@SebLeich
Copy link

Is there a solution available for that yet?

@liesahead
Copy link

Still relevant

@rabie-khlifi
Copy link

you can just add

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

to the global css file to force it to be removed

@Nzaoui
Copy link

Nzaoui commented Jun 18, 2024 •
edited
Loading

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

szoboszlaypali added a commit to szoboszlaypali/components that referenced this issue Feb 25, 2025
@szoboszlaypali
fix(cdk/overlay): scroll was blocked when zoomed out even if scrollin…
8545abc 
…g wasn't an option

Fixes that an unnecessary disabled scroll bar was added when zoomed out during opening dialogs.

Fixes angular#25054.
@szoboszlaypali szoboszlaypali linked a pull request Feb 25, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: cdk/scrolling P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Milestone
No milestone
6 participants
@zarend @MarkoSkugor @Nzaoui @SebLeich @liesahead @rabie-khlifi