javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(header): backdrop filter no longer distorts content with collapsible header (#20388)

Browse Source 
fixes #20385
This commit is contained in:
Liam DeBeasi
2020-02-06 09:41:25 -05:00
committed by GitHub
parent cfcdd97cc0
commit 11d39457d5
2 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/header/header.ios.scss
View File

@ -19,6 +19,14 @@
.header-translucent-ios ion-toolbar { .header-translucent-ios ion-toolbar {
--opacity: .8; --opacity: .8;
} }
/**
* Disable the saturation otherwise it distorts the content
* background color when large header is not collapsed
*/
.header-collapse-condense-inactive .header-background {
backdrop-filter: blur($header-ios-blur);
}
} }
.header-ios.ion-no-border ion-toolbar:last-of-type { .header-ios.ion-no-border ion-toolbar:last-of-type {

5
core/src/components/header/header.ios.vars.scss
View File

@ -3,5 +3,8 @@
// iOS Header // iOS Header
// -------------------------------------------------- // --------------------------------------------------
/// @prop - Blur value for backdrop-filter
$header-ios-blur: 20px;
/// @prop - Filter of the translucent header /// @prop - Filter of the translucent header
$header-ios-translucent-filter: saturate(180%) blur(20px) !default; $header-ios-translucent-filter: saturate(180%) blur($header-ios-blur) !default;