This issue is to collect and keep track of RTL bugs vs. master so we can make sure to properly update and fix them.

Below are:

• a list of some utilities presenting issues in RC.0,
• and a list of components with tests included in the test suite.

Legend

Fixed issues

CSS Utilities

• ✅ Text Alignment: text-start, text-end, text-justify, & their responsive versions
• ☑️ Float Elements: float-start, float-end, & their responsive versions (regression: Ionic 4.0.0 RTL issues #17012 (comment)) (PR fix(sass): update rtl function to prepend host with context properly #18315 solves issue in Chrome)
• ✅ Element Padding: padding-start, padding-end
• ✅ Element Margin: margin-start, margin-end
• ✅ Flex Container Properties: justify-content-start, justify-content-end

Grid

• ✅ Offsetting columns (iOS/MD) (PR: fix(col): handle RTL offset-*, pull-*, and push-* #16702)
• ✅ Push and pull (iOS/MD) (PR: fix(col): handle RTL offset-*, pull-*, and push-* #16702)

Components

• ✅ action-sheet
• alert:
  • ✅ scroller with radio in MD: position correctly (see https://gyazo.com/d1602f045193380be6d02432a7e61878)
• ✅ anchor
• ✅ avatar
• ✅ badge
• ✅ button
  • ✅ slotted icon in button in iOS
  • ✅ slotted icon in button in MD
• ✅ buttons
• ✅ card
• ✅ card-header
• ✅ checkbox
• ✅ chip
• ✅ content
• datetime
  • ☑️ picker in iOS/MD: fix start/end columns’ horizontal positioning when there are 2 or 3 picker columns (PR fix(picker): update picker columns to comply with #17018 #18339)
  • ☑️ with floating or stacked label: the datetime text should stay in the document flow (regression) (PR fix(datetime): update datetime text direction #18340)
  • ✅ picker in iOS/MD: keep the order of columns as in LTR when using time and/or DD/MM/YYYY date format (see Datetime flips HH:mm to mm:HH in RTL #16294) (PR: fix(picker): do not change column order when RTL #17018)
• fab
  • ☑️ horizontal position: position ion-fab correctly (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325)
• ✅ fab-button
• ✅ footer
• ✅ grid
  • ✅ col offsets, push, and pulls: fix offsets, pushs and pulls (PR: fix(col): handle RTL offset-*, pull-*, and push-* #16702)
• ✅ header
• ✅ icon (PR fix(icon): update to latest ionicons and add rtl test #17196)
  • ✅ arrow icons in iOS: automatic invert
  • ✅ arrow icons in MD: automatic invert
  • ✅ flip-rtl: add property to flip icons
  • ✅ detail-icon: use correct direction ("<" instead of ">") (see [ionic 4.0.2] list item icon direction on iOS mode in rtl is opposit #14958) (PR: fix(icon): fix rtl detail icon for ios #17016 REVERTED) (PR fix(icon): update to latest ionicons and add rtl test #17196)
• ✅ img
• ✅ infinite-scroll
• ✅ input (specific floating label issues are listed in the relevant components, and the issue with label and input vertical alignment is not specific to RTL)
• ✅ item (specific select, range, and floating label issues in relevant components)
• item sliding
  • ☑️ swiping direction: fix swiping direction & buttons positions (<ion-item-options> in RTL incorrect swiping direction (Ionic4) #14328) (fix(item-sliding): use the correct gesture direction and side for rtl #18366)
• label
  • ☑️ position="floating" in iOS/MD: fix horizontal floating position relative to ion-item (PR fix(sass): update rtl function to prepend host with context properly #18315)
• ✅ list
• ✅ loading
• menu
  • ☑️ outer shadow in iOS/MD: invert shadows (Ionic 4.0.0 RTL issues #17012 (comment)) (PR fix(menu): iOS + RTL (from PR 17157) #17383)
  • ❌ scrollbar in long menu: same issue than AlertController (Ionic 4.0.0 RTL issues #17012 (comment) / Ionic 4.0.0 RTL issues #17012 (comment) / https://gyazo.com/1d3033c073c854d9e09c89d934ecf50d
• ✅ menu-button
• ✅ modal
• ✅ nav
• ✅ nav-pop
• ✅ nav-push
• ✅ nav-set-root
• ✅ note
• ✅ picker
• popover
  • ✅ position in MD: position properly (PR: fix(popover): position properly in RTL / MD modes #16745)
  • ☑️ enter animation in MD: invert animation direction (PRs fix(progress-bar): RTL (from PR 17157) #17382 + fix(popover): update animation origin in RTL/MD #17645)
• progress-bar
  • ☑️ default and reverse directions: both are the same; one of them should be inverted (PR fix(progress-bar): flip rtl using the existing reversed property #17464)
  • ☑️ indeterminate / buffer: fix animations (PR fix(progress-bar): flip rtl using the existing reversed property #17464)
• ✅ radio
• ✅ radio-group
• range
  • ☑️ active range section in iOS/MD: fix position (PR fix(range): RTL (from PR 17157) #17384)
  • ☑️ knobs in iOS/MD: fix position (PR fix(range): RTL (from PR 17157) #17384)
  • ☑️ pins in MD: fix (background) position (PR fix(range): update border radius on range pin for rtl #18321)
• ✅ refresher
• ✅ reorder-group
• ✅ ripple-effect
• searchbar ([Ionic V4.0.0-beta.12] [ios] [ion-searchbar] showCancelButton has style issue in RTL #15884)
  • ✅ cancel icon in MD: invert? Maybe not since the cancelButtonIcon property allows setting own icon? ➡️icon is now inverted thanks to PR fix(icon): update to latest ionicons and add rtl test #17196
  • ☑️ cancel icon in MD: invert horizontal position (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325)
  • ☑️ clear icon in iOS: invert horizontal position (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325)
  • ☑️ clear icon in MD: invert horizontal position (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325)
  • ☑️ search icon in iOS: invert horizontal position (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325)
  • ☑️ search icon in MD: invert horizontal position (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325)
• segment
  • ☑️ first and last buttons in iOS: fix borders (PR fix(segment): update segment border for rtl #18326)
  • ❌ border in Safari: border width is not switching
• select
  • ☑️ select icon in iOS: fix position of the inner element (fix(sass): update rtl function to prepend host with context properly #18315)
  • ✅ AlertController interface: same issues than alert component
• ✅ skeleton-text
• ✅ slides
• ✅ spinner
• ✅ split-pane
• tab-bar
  • ☑️ badges: invert horizontal position (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325 solves issue in Chrome)
  • ☑️ badges in Safari: invert horizontal position
• ✅ tabs
• ✅ text
• ✅ textarea (label and input vertical alignment issue is not specific to RTL)
• ✅ thumbnail
• ✅ toast
• text
  • Float Elements: float-start, float-end, & their responsive versions in Safari
• toggle
  • ✅ swipe gesture: fix gesture direction
  • ☑️ checked toggle in iOS / MD: the handle is off (regression:
  • ❌ swipe gesture: fix gesture direction in Safari
    https://gyazo.com/b93302e08a9c43f312899736ab26717b / Ionic 4.0.0 RTL issues #17012 (comment)) (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325 fixes issue in Chrome)
  • ☑️ swipe end in iOS mode: before gesture end, the handle looks off and goes beyond the left side (PR fix(rtl): updates searchbar, fab and toggle icon positioning in rtl #18325 fixes issue in Chrome)
• toolbar ([4.0.0-beta.5] ion-back-button wrong text position in RTL #15357) (PR fix(icon): update to latest ionicons and add rtl test #17196)
  • ✅ back button in iOS: use correct direction (">" instead of "<")
  • ✅ back button in MD: use correct direction ("->" instead of "<-")
• ✅ virtual-scroll
• swipe to go back
  • gesture direction (Ionic 4.0.0 RTL issues #17012 (comment))

Existing Issues as of 4.4.1

• item-divider
  • ❌ slots margins in MD: in both slot="start" and slot="end", a small 2px margin appears on one side in LTR, but not on the opposite side in RTL (see https://i.imgur.com/4W5TFs2.png for an illustration of the problem: the box model shows the slotted ion-button))

See also: animation is not rtl-aware: #19489

Contributing

Please help with the untested components, or double-check the tested ones if you feel like it. Thank you for the contribution anyway!

If you're not familiar with the included test suite:

1. Fork the Ionic repo;
2. Use the master branch;
3. Setup your local copy;
4. Run the test suite locally;
5. When you navigate to the component you want to test, you can add ?rtl=true to the url in order to check the RTL version;
6. Submit a comment with the issue.

See the contributing documentation for more information.

You can also test your own app using @ionic/angular@dev