skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(overlay): transparent overlay not blocking scroll on Firefox 57 (#9446)

Browse Source 
As of Firefox 57, it looks like elements with a transparent background won't capture scroll events. These changes work around the issue by not setting the background color, but using `opacity` to hide the element while keeping it scrollable.

Fixes #8924.
This commit is contained in:
Kristiyan Kostadinov
2018-01-23 16:35:10 +01:00
committed by Jeremy Elbourn
parent 66dc73a5fd
commit d0ad3b763a
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/cdk/overlay/_overlay.scss
+7 -1
View File
@@ -73,7 +73,13 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
}
.cdk-overlay-transparent-backdrop {
background: none;
// Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from
// capturing the user's mouse scroll events. Since we also can't use something like
// `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at
// all and using `opacity` to make the element transparent.
&, &.cdk-overlay-backdrop-showing {
opacity: 0;
}
}
// Used when disabling global scrolling.