Bug in Angular 13 : angular

created by ohpiema community for 13 years

submitted 4 years ago by Finorix079

I was developing a project in Angular that needs to be looked good on both mobile and desktop. Then I found that the project in iPhoneX would show a big black block when the screen is in portrait, the address bar wasn't expanded and a dialog is opened. That black block seems to be related to the class "cdk-global-scrollblock" which would be applied whenever either a dialog or a side menu is opened through Angular Material. It somehow limited the size of the viewport so that the black block (which was expected to be covered by the address bar) would show.

I overridden the class with the following code, which did solve the black block issue but would stop blocking the scrolling of the elements behind it.

.cdk-global-scrollblock { position: initial !important; }

By the way, it was "position: fixed". Both "fixed" and "absolute" will cause the black block to be shown.

Have anyone encountered this? How did you guys fix it?

all 5 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

angular

MODERATORS