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<Animation>) \| 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<Animation>) \| 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<Animation>) \| 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<Animation>) \| 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 `<Ionic>` would become `&lt;Ionic&gt;`  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<Animation>) \| 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<Animation>) \| 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<Animation>) \| 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<Animation>) \| 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<Animation>) \| 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<Animation>) \| 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<Animation>) \| 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<Animation>) \| 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;