bug(OVERLAY): cdk-global-scrollblock blocks overlay content scroll after scrolling over its header first #32541
Description
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
No response
Description
On iOS when overlay with header and scrollable content is opened and you scroll over header first then move your finger and try to scroll over content right away - content is not scrollable.
(ex. Dialog, but I was able to reproduce it on my custom component that extends Overlay as well)
I've managed to discover that it is somehow caused by cdk-global-scrollblock along with its styles added to <html>.
As a workaround I:
- stopped using ScrollStrategyOption.block() (now I'm using reposition())
- created service that:
- onOpen
- checks if platform is iOS
- sets following styles to
<html>and<body>:- overflow: hidden;
- height: 100%;
- remembers window.scrollY
- remembers trigger ref (if passed to service)
- remembers window orientation
- onClose:
- checks if platform is iOS
- restores overflow and height
- compares current window orientation with remembered one and:
- if the same - scrolls view to remembered scrollY (making sure scroll behavior is set to auto)
- if not the same - scrolls view to remembered trigger ref if available (if not then does nothing which ends up with scrolling to trigger anyway as browser somehow manage to do it by itself if orientation was different. In other cases it lands user on top of the page)
- resets all remembered values
I've checked this on iOS versions and browsers mentioned below (Environment section) but possibly it is reproducible on more.
On attached recording I'm mimicking touch actions with my cursor.
dialog_scroll_issue_720p.mov
Reproduction
Material Example link: https://material.angular.dev/components/dialog/examples#dialog-content
Steps to reproduce:
- Open dialog
- Scroll over dialog header
- Scroll over dialog content immediately after moving your finger from header.
Expected Behavior
Should scroll dialog content.
Actual Behavior
Content is not scrolling.
You need to wait a second without touching the screen, then it is possible again to scroll the content.
Environment
- Angular: 20.0.6, 21.0.0
- CDK/Material: 20.0.6, 21.0.0
- Browser(s): Safari, Chrome, FireFox
- Operating System (e.g. Windows, macOS, Ubuntu): iOS 18.6.2 and iOS 26.1.0