diff --git a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Chrome-linux.png
index 192183c6e5b..494273cdc1b 100644
Binary files a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/themes/ionic.mixins.scss b/core/src/themes/ionic.mixins.scss
index aa25b62abe6..8d18b01c37c 100644
--- a/core/src/themes/ionic.mixins.scss
+++ b/core/src/themes/ionic.mixins.scss
@@ -258,10 +258,15 @@ $rtl-use-host-context: true !default;
     }
   }
 
-  // Supported by Chrome.
+  // Fallback for Chrome 89 - 119, which support `:host-context()` but not
+  // `:dir()`. `:host-context([dir=rtl])` matches any ancestor with
+  // `dir="rtl"`, even when a closer ancestor sets `dir="ltr"`, so it is
+  // only used when `:dir()` is not available.
   @if $rtl-use-host-context and length($hostContextSelectors) > 0 {
-    @at-root #{$hostContextSelectors} {
-      @content;
+    @supports not selector(:dir(rtl)) {
+      @at-root #{$hostContextSelectors} {
+        @content;
+      }
     }
   }
 
@@ -272,21 +277,14 @@ $rtl-use-host-context: true !default;
     }
   }
 
-  // If browser can support `:dir()`, then add the `:dir()` selectors.
+  // `:dir()` follows the direction of the nearest ancestor with a `dir`
+  // attribute, so it is used whenever the browser supports it. This covers
+  // Chrome 120+, Firefox and Safari 16.4+.
+  // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/
+  // In Safari 16.4 - 16.x, `:dir()` does not update when the direction
+  // changes after the page loads. Safari 17+ is not affected.
+  // @link https://bugs.webkit.org/show_bug.cgi?id=257133
   @supports selector(:dir(rtl)) {
-    // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.
-    // `:host-context()` is added:
-    // - through the `add-root-selector()` function.
-    // - first so that it takes precedence over `:dir()`.
-    // For example,
-    // - Firefox doesn't support `:host-context()`, but does support `:dir()`.
-    // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`
-    // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/
-    // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when
-    // -- the app direction is changed dynamically. v17+ works fine.
-    // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133
-
-    // Supported by Firefox.
     @at-root #{add-root-selector($root, ":dir(rtl)", false)} {
       @content;
     }