From 6b5a59dc43b131b3e1727bd4d7c505b9b8894543 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 19 Jul 2019 11:16:10 -0400 Subject: [PATCH] fix(components): apply translucent if backdrop-filter is supported (#18832) This updates the components and the docs so that translucent is only applied when backdrop filter is supported, this prevents it from being applied when viewing iOS in Chrome, for example. closes ionic-team/ionic-docs#666 --- core/src/components.d.ts | 40 +++++++++---------- .../components/action-sheet/action-sheet.tsx | 4 +- core/src/components/action-sheet/readme.md | 26 ++++++------ core/src/components/alert/alert.ios.scss | 9 +++-- core/src/components/alert/alert.tsx | 2 + core/src/components/alert/readme.md | 2 +- .../card-header/card-header.ios.scss | 10 +++-- .../components/card-header/card-header.tsx | 2 + core/src/components/card-header/readme.md | 2 +- core/src/components/fab-button/fab-button.tsx | 2 +- core/src/components/fab-button/readme.md | 2 +- core/src/components/footer/footer.ios.scss | 16 ++++---- core/src/components/footer/footer.tsx | 5 ++- core/src/components/footer/readme.md | 8 ++-- core/src/components/header/header.ios.scss | 16 ++++---- core/src/components/header/header.tsx | 5 ++- core/src/components/header/readme.md | 8 ++-- core/src/components/loading/loading.ios.scss | 8 ++-- core/src/components/loading/loading.tsx | 2 + core/src/components/loading/readme.md | 28 ++++++------- core/src/components/popover/popover.ios.scss | 12 +++--- core/src/components/popover/popover.tsx | 2 + core/src/components/popover/readme.md | 28 ++++++------- core/src/components/tab-bar/readme.md | 2 +- core/src/components/tab-bar/tab-bar.ios.scss | 22 +++++----- core/src/components/tab-bar/tab-bar.tsx | 2 + core/src/components/toast/readme.md | 2 +- core/src/components/toast/toast.ios.scss | 8 ++-- core/src/components/toast/toast.tsx | 2 + 29 files changed, 156 insertions(+), 121 deletions(-) diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 525e3f684b..bcb2cd5e64 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -135,7 +135,7 @@ export namespace Components { */ 'subHeader'?: string; /** - * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter. + * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ 'translucent': boolean; } @@ -220,7 +220,7 @@ export namespace Components { */ 'subHeader'?: string; /** - * If `true`, the alert will be translucent. + * If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ 'translucent': boolean; } @@ -433,7 +433,7 @@ export namespace Components { */ 'mode'?: "ios" | "md"; /** - * If `true`, the card header will be translucent. + * If `true`, the card header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ 'translucent': boolean; } @@ -807,7 +807,7 @@ export namespace Components { */ 'target': string | undefined; /** - * If `true`, the fab button will be translucent. Only applies to `ios` mode on devices that support [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). + * If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ 'translucent': boolean; /** @@ -831,7 +831,7 @@ export namespace Components { */ 'mode'?: "ios" | "md"; /** - * If `true`, the footer will be translucent. Only applies to `ios` mode. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. + * If `true`, the footer will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. */ 'translucent': boolean; } @@ -847,7 +847,7 @@ export namespace Components { */ 'mode'?: "ios" | "md"; /** - * If `true`, the header will be translucent. Only applies to `ios` mode. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. + * If `true`, the header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. */ 'translucent': boolean; } @@ -1252,7 +1252,7 @@ export namespace Components { */ 'spinner'?: SpinnerTypes | null; /** - * If `true`, the loading indicator will be translucent. + * If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ 'translucent': boolean; } @@ -1740,7 +1740,7 @@ export namespace Components { */ 'showBackdrop': boolean; /** - * If `true`, the popover will be translucent. + * If `true`, the popover will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ 'translucent': boolean; } @@ -2397,7 +2397,7 @@ export namespace Components { */ 'selectedTab'?: string; /** - * If `true`, the tab bar will be translucent. + * If `true`, the tab bar will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ 'translucent': boolean; } @@ -2634,7 +2634,7 @@ export namespace Components { */ 'showCloseButton': boolean; /** - * If `true`, the toast will be translucent. + * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ 'translucent': boolean; } @@ -3500,7 +3500,7 @@ declare namespace LocalJSX { */ 'subHeader'?: string; /** - * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter. + * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ 'translucent'?: boolean; } @@ -3571,7 +3571,7 @@ declare namespace LocalJSX { */ 'subHeader'?: string; /** - * If `true`, the alert will be translucent. + * If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ 'translucent'?: boolean; } @@ -3783,7 +3783,7 @@ declare namespace LocalJSX { */ 'mode'?: "ios" | "md"; /** - * If `true`, the card header will be translucent. + * If `true`, the card header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ 'translucent'?: boolean; } @@ -4177,7 +4177,7 @@ declare namespace LocalJSX { */ 'target'?: string | undefined; /** - * If `true`, the fab button will be translucent. Only applies to `ios` mode on devices that support [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). + * If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ 'translucent'?: boolean; /** @@ -4201,7 +4201,7 @@ declare namespace LocalJSX { */ 'mode'?: "ios" | "md"; /** - * If `true`, the footer will be translucent. Only applies to `ios` mode. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. + * If `true`, the footer will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. */ 'translucent'?: boolean; } @@ -4217,7 +4217,7 @@ declare namespace LocalJSX { */ 'mode'?: "ios" | "md"; /** - * If `true`, the header will be translucent. Only applies to `ios` mode. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. + * If `true`, the header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. */ 'translucent'?: boolean; } @@ -4624,7 +4624,7 @@ declare namespace LocalJSX { */ 'spinner'?: SpinnerTypes | null; /** - * If `true`, the loading indicator will be translucent. + * If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ 'translucent'?: boolean; } @@ -4959,7 +4959,7 @@ declare namespace LocalJSX { */ 'showBackdrop'?: boolean; /** - * If `true`, the popover will be translucent. + * If `true`, the popover will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ 'translucent'?: boolean; } @@ -5670,7 +5670,7 @@ declare namespace LocalJSX { */ 'selectedTab'?: string; /** - * If `true`, the tab bar will be translucent. + * If `true`, the tab bar will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ 'translucent'?: boolean; } @@ -5907,7 +5907,7 @@ declare namespace LocalJSX { */ 'showCloseButton'?: boolean; /** - * If `true`, the toast will be translucent. + * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ 'translucent'?: boolean; } diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx index 207f8945cb..7eb25a2b88 100644 --- a/core/src/components/action-sheet/action-sheet.tsx +++ b/core/src/components/action-sheet/action-sheet.tsx @@ -74,7 +74,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { @Prop() subHeader?: string; /** - * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter. + * If `true`, the action sheet will be translucent. + * Only applies when the mode is `"ios"` and the device supports + * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ @Prop() translucent = false; diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index 2e1b06eb88..b38d492a68 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -250,19 +250,19 @@ export default { ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the action sheet will animate. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked. | `boolean` | `true` | -| `buttons` | -- | An array of buttons for the action sheet. | `(string \| ActionSheetButton)[]` | `[]` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | -| `header` | `header` | Title for the action sheet. | `string \| undefined` | `undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string \| undefined` | `undefined` | -| `translucent` | `translucent` | If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the action sheet will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked. | `boolean` | `true` | +| `buttons` | -- | An array of buttons for the action sheet. | `(string \| ActionSheetButton)[]` | `[]` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `header` | `header` | Title for the action sheet. | `string \| undefined` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string \| undefined` | `undefined` | +| `translucent` | `translucent` | If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | ## Events diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss index 3544257e12..e950d572b8 100644 --- a/core/src/components/alert/alert.ios.scss +++ b/core/src/components/alert/alert.ios.scss @@ -22,12 +22,13 @@ // iOS Translucent Alert // ----------------------------------------- -:host(.alert-translucent) .alert-wrapper { - background: $alert-ios-translucent-background-color; - backdrop-filter: $alert-ios-translucent-filter; +@supports (backdrop-filter: blur(0)) { + :host(.alert-translucent) .alert-wrapper { + background: $alert-ios-translucent-background-color; + backdrop-filter: $alert-ios-translucent-filter; + } } - // iOS Alert Header // -------------------------------------------------- diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index be2ed27ee6..b1816c19a8 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -97,6 +97,8 @@ export class Alert implements ComponentInterface, OverlayInterface { /** * If `true`, the alert will be translucent. + * Only applies when the mode is `"ios"` and the device supports + * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ @Prop() translucent = false; diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index 1dbec6861b..7e85da3225 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -1052,7 +1052,7 @@ export default { | `message` | `message` | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` | -| `translucent` | `translucent` | If `true`, the alert will be translucent. | `boolean` | `false` | +| `translucent` | `translucent` | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | ## Events diff --git a/core/src/components/card-header/card-header.ios.scss b/core/src/components/card-header/card-header.ios.scss index bf6e48f5eb..d858a173b4 100644 --- a/core/src/components/card-header/card-header.ios.scss +++ b/core/src/components/card-header/card-header.ios.scss @@ -8,7 +8,9 @@ @include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start); } -:host(.card-header-translucent) { - background-color: $card-ios-header-translucent-background-color; - backdrop-filter: $card-ios-header-translucent-filter; -} +@supports (backdrop-filter: blur(0)) { + :host(.card-header-translucent) { + background-color: $card-ios-header-translucent-background-color; + backdrop-filter: $card-ios-header-translucent-filter; + } +} \ No newline at end of file diff --git a/core/src/components/card-header/card-header.tsx b/core/src/components/card-header/card-header.tsx index dd2c703799..d14b64efc0 100644 --- a/core/src/components/card-header/card-header.tsx +++ b/core/src/components/card-header/card-header.tsx @@ -25,6 +25,8 @@ export class CardHeader implements ComponentInterface { /** * If `true`, the card header will be translucent. + * Only applies when the mode is `"ios"` and the device supports + * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ @Prop() translucent = false; diff --git a/core/src/components/card-header/readme.md b/core/src/components/card-header/readme.md index d8c11f4750..14b7f8828e 100644 --- a/core/src/components/card-header/readme.md +++ b/core/src/components/card-header/readme.md @@ -12,7 +12,7 @@ | ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | | `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `translucent` | `translucent` | If `true`, the card header will be translucent. | `boolean` | `false` | +| `translucent` | `translucent` | If `true`, the card header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | ---------------------------------------------- diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx index 2ef79c0210..5db633489b 100755 --- a/core/src/components/fab-button/fab-button.tsx +++ b/core/src/components/fab-button/fab-button.tsx @@ -76,7 +76,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt /** * If `true`, the fab button will be translucent. - * Only applies to `ios` mode on devices that support + * Only applies when the mode is `"ios"` and the device supports * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ @Prop() translucent = false; diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md index ad800402e5..53ed7b3236 100644 --- a/core/src/components/fab-button/readme.md +++ b/core/src/components/fab-button/readme.md @@ -111,7 +111,7 @@ export const FabButtonExample: React.FunctionComponent = () => ( | `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` | | `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab. | `"small" \| undefined` | `undefined` | | `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` | -| `translucent` | `translucent` | If `true`, the fab button will be translucent. Only applies to `ios` mode on devices that support [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | +| `translucent` | `translucent` | If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | | `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | diff --git a/core/src/components/footer/footer.ios.scss b/core/src/components/footer/footer.ios.scss index 37f4a08bf5..1496a7ab03 100644 --- a/core/src/components/footer/footer.ios.scss +++ b/core/src/components/footer/footer.ios.scss @@ -12,11 +12,13 @@ --border-width: 0; } -.footer-translucent-ios { - backdrop-filter: $footer-ios-translucent-filter; -} +@supports (backdrop-filter: blur(0)) { + .footer-translucent-ios { + backdrop-filter: $footer-ios-translucent-filter; + } -.footer-translucent-ios ion-toolbar { - --opacity: .8; - --backdrop-filter: #{$footer-ios-translucent-filter}; -} + .footer-translucent-ios ion-toolbar { + --opacity: .8; + --backdrop-filter: #{$footer-ios-translucent-filter}; + } +} \ No newline at end of file diff --git a/core/src/components/footer/footer.tsx b/core/src/components/footer/footer.tsx index 3be14b88c4..a17cafb7a0 100644 --- a/core/src/components/footer/footer.tsx +++ b/core/src/components/footer/footer.tsx @@ -15,7 +15,10 @@ import { getIonMode } from '../../global/ionic-global'; export class Footer implements ComponentInterface { /** - * If `true`, the footer will be translucent. Only applies to `ios` mode. + * If `true`, the footer will be translucent. + * Only applies when the mode is `"ios"` and the device supports + * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). + * * Note: In order to scroll content behind the footer, the `fullscreen` * attribute needs to be set on the content. */ diff --git a/core/src/components/footer/readme.md b/core/src/components/footer/readme.md index 34687b9304..1c31aa9360 100644 --- a/core/src/components/footer/readme.md +++ b/core/src/components/footer/readme.md @@ -44,10 +44,10 @@ export const FooterExample: React.FunctionComponent = () => ( ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------- | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `translucent` | `translucent` | If `true`, the footer will be translucent. Only applies to `ios` mode. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------- | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `translucent` | `translucent` | If `true`, the footer will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. | `boolean` | `false` | ---------------------------------------------- diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss index 7b30ee620d..2214f68c81 100644 --- a/core/src/components/header/header.ios.scss +++ b/core/src/components/header/header.ios.scss @@ -12,11 +12,13 @@ --border-width: 0; } -.header-translucent-ios { - backdrop-filter: $header-ios-translucent-filter; -} +@supports (backdrop-filter: blur(0)) { + .header-translucent-ios { + backdrop-filter: $header-ios-translucent-filter; + } -.header-translucent-ios ion-toolbar { - --opacity: .8; - --backdrop-filter: #{$header-ios-translucent-filter}; -} + .header-translucent-ios ion-toolbar { + --opacity: .8; + --backdrop-filter: #{$header-ios-translucent-filter}; + } +} \ No newline at end of file diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx index a0712b2b90..159fc7c7d6 100644 --- a/core/src/components/header/header.tsx +++ b/core/src/components/header/header.tsx @@ -15,7 +15,10 @@ import { getIonMode } from '../../global/ionic-global'; export class Header implements ComponentInterface { /** - * If `true`, the header will be translucent. Only applies to `ios` mode. + * If `true`, the header will be translucent. + * Only applies when the mode is `"ios"` and the device supports + * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). + * * Note: In order to scroll content behind the header, the `fullscreen` * attribute needs to be set on the content. */ diff --git a/core/src/components/header/readme.md b/core/src/components/header/readme.md index ff68f93d1d..72d7e0d38d 100644 --- a/core/src/components/header/readme.md +++ b/core/src/components/header/readme.md @@ -60,10 +60,10 @@ export const HeaderExample: React.FunctionComponent = () => ( ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------- | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `translucent` | `translucent` | If `true`, the header will be translucent. Only applies to `ios` mode. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------- | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `translucent` | `translucent` | If `true`, the header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. | `boolean` | `false` | ---------------------------------------------- diff --git a/core/src/components/loading/loading.ios.scss b/core/src/components/loading/loading.ios.scss index 98f5c3c7c5..828b374473 100644 --- a/core/src/components/loading/loading.ios.scss +++ b/core/src/components/loading/loading.ios.scss @@ -24,9 +24,11 @@ // iOS Translucent Loading // ----------------------------------------- -:host(.loading-translucent) .loading-wrapper { - background-color: $loading-ios-translucent-background-color; - backdrop-filter: $loading-ios-translucent-filter; +@supports (backdrop-filter: blur(0)) { + :host(.loading-translucent) .loading-wrapper { + background-color: $loading-ios-translucent-background-color; + backdrop-filter: $loading-ios-translucent-filter; + } } diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx index a328303c1b..ca02be14b9 100644 --- a/core/src/components/loading/loading.tsx +++ b/core/src/components/loading/loading.tsx @@ -83,6 +83,8 @@ export class Loading implements ComponentInterface, OverlayInterface { /** * If `true`, the loading indicator will be translucent. + * Only applies when the mode is `"ios"` and the device supports + * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ @Prop() translucent = false; diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index c298e7a36b..da38250661 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -176,20 +176,20 @@ export default { ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the loading indicator will animate. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` | -| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | -| `message` | `message` | Optional text content to display in the loading indicator. | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` | -| `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` | -| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the loading indicator will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` | +| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `message` | `message` | Optional text content to display in the loading indicator. | `string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` | +| `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` | +| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | ## Events diff --git a/core/src/components/popover/popover.ios.scss b/core/src/components/popover/popover.ios.scss index d0d3a6b580..fd46b5416b 100644 --- a/core/src/components/popover/popover.ios.scss +++ b/core/src/components/popover/popover.ios.scss @@ -57,8 +57,10 @@ // Translucent Popover // ----------------------------------------- -:host(.popover-translucent) .popover-content, -:host(.popover-translucent) .popover-arrow::after { - background: $popover-ios-translucent-background-color; - backdrop-filter: $popover-ios-translucent-filter; -} +@supports (backdrop-filter: blur(0)) { + :host(.popover-translucent) .popover-content, + :host(.popover-translucent) .popover-arrow::after { + background: $popover-ios-translucent-background-color; + backdrop-filter: $popover-ios-translucent-filter; + } +} \ No newline at end of file diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index 1dbff2bfd1..7e8340aaf2 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -87,6 +87,8 @@ export class Popover implements ComponentInterface, OverlayInterface { /** * If `true`, the popover will be translucent. + * Only applies when the mode is `"ios"` and the device supports + * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ @Prop() translucent = false; diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md index 39d5e0483b..3041038e96 100644 --- a/core/src/components/popover/readme.md +++ b/core/src/components/popover/readme.md @@ -87,20 +87,20 @@ export const PopoverExample: React.FunctionComponent = () => { ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------------ | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the popover will animate. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the popover will be dismissed when the backdrop is clicked. | `boolean` | `true` | -| `component` _(required)_ | `component` | The component to display inside of the popover. | `Function \| HTMLElement \| null \| string` | `undefined` | -| `componentProps` | -- | The data to pass to the popover component. | `undefined \| { [key: string]: any; }` | `undefined` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `enterAnimation` | -- | Animation to use when the popover is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | -| `event` | `event` | The event to pass to the popover animation. | `any` | `undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the popover. | `boolean` | `true` | -| `translucent` | `translucent` | If `true`, the popover will be translucent. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------------------ | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the popover will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the popover will be dismissed when the backdrop is clicked. | `boolean` | `true` | +| `component` _(required)_ | `component` | The component to display inside of the popover. | `Function \| HTMLElement \| null \| string` | `undefined` | +| `componentProps` | -- | The data to pass to the popover component. | `undefined \| { [key: string]: any; }` | `undefined` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `enterAnimation` | -- | Animation to use when the popover is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `event` | `event` | The event to pass to the popover animation. | `any` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the popover. | `boolean` | `true` | +| `translucent` | `translucent` | If `true`, the popover will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | ## Events diff --git a/core/src/components/tab-bar/readme.md b/core/src/components/tab-bar/readme.md index 7d0f460801..8255246167 100644 --- a/core/src/components/tab-bar/readme.md +++ b/core/src/components/tab-bar/readme.md @@ -110,7 +110,7 @@ export const TabBarExample: React.FunctionComponent = () => ( | `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `selectedTab` | `selected-tab` | The selected tab component | `string \| undefined` | `undefined` | -| `translucent` | `translucent` | If `true`, the tab bar will be translucent. | `boolean` | `false` | +| `translucent` | `translucent` | If `true`, the tab bar will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | ## CSS Custom Properties diff --git a/core/src/components/tab-bar/tab-bar.ios.scss b/core/src/components/tab-bar/tab-bar.ios.scss index 006df07de4..f035bf2bb4 100644 --- a/core/src/components/tab-bar/tab-bar.ios.scss +++ b/core/src/components/tab-bar/tab-bar.ios.scss @@ -18,16 +18,18 @@ // iOS Translucent Tab bar // -------------------------------------------------- -:host(.tab-bar-translucent) { - --background: #{$tab-bar-ios-translucent-background-color}; - backdrop-filter: $tab-bar-ios-translucent-filter; -} +@supports (backdrop-filter: blur(0)) { + :host(.tab-bar-translucent) { + --background: #{$tab-bar-ios-translucent-background-color}; + backdrop-filter: $tab-bar-ios-translucent-filter; + } -// iOS Translucent Tab bar with Color -:host(.ion-color.tab-bar-translucent) { - background: #{current-color(base, $tab-bar-ios-translucent-background-color-alpha)}; -} + // iOS Translucent Tab bar with Color + :host(.ion-color.tab-bar-translucent) { + background: #{current-color(base, $tab-bar-ios-translucent-background-color-alpha)}; + } -:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) { - background: rgba($background-color-rgb, .6); + :host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) { + background: rgba($background-color-rgb, .6); + } } \ No newline at end of file diff --git a/core/src/components/tab-bar/tab-bar.tsx b/core/src/components/tab-bar/tab-bar.tsx index 2cb82d7da5..c1f4e42f26 100644 --- a/core/src/components/tab-bar/tab-bar.tsx +++ b/core/src/components/tab-bar/tab-bar.tsx @@ -43,6 +43,8 @@ export class TabBar implements ComponentInterface { /** * If `true`, the tab bar will be translucent. + * Only applies when the mode is `"ios"` and the device supports + * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ @Prop() translucent = false; diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index b3427e58f5..6c6f277c58 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -186,7 +186,7 @@ export const ToastExample: React.FunctionComponent = () => { | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` | | `showCloseButton` | `show-close-button` | If `true`, the close button will be displayed. | `boolean` | `false` | -| `translucent` | `translucent` | If `true`, the toast will be translucent. | `boolean` | `false` | +| `translucent` | `translucent` | If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | ## Events diff --git a/core/src/components/toast/toast.ios.scss b/core/src/components/toast/toast.ios.scss index fd3f95a2b4..a44d8132d9 100644 --- a/core/src/components/toast/toast.ios.scss +++ b/core/src/components/toast/toast.ios.scss @@ -25,9 +25,11 @@ z-index: $z-index-overlay-wrapper; } -:host(.toast-translucent) .toast-wrapper { - background: $toast-ios-translucent-background-color; - backdrop-filter: $toast-ios-translucent-filter; +@supports (backdrop-filter: blur(0)) { + :host(.toast-translucent) .toast-wrapper { + background: $toast-ios-translucent-background-color; + backdrop-filter: $toast-ios-translucent-filter; + } } .toast-wrapper.toast-top { diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index 81627ad131..7181646bb0 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -103,6 +103,8 @@ export class Toast implements ComponentInterface, OverlayInterface { /** * If `true`, the toast will be translucent. + * Only applies when the mode is `"ios"` and the device supports + * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). */ @Prop() translucent = false;