Skip to content

fix(rtl): use :dir() for rtl styles when the browser supports it #31744

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
brandyscarney wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

fix(rtl): use :dir() for rtl styles when the browser supports it #31744

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified ...ition/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 15 additions & 17 deletions core/src/themes/ionic.mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}

Expand All @@ -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;
}
Expand Down
Loading