Skip to content

Fix #25645 - RTL layout issues in URLBar#31851

Open
MarkKirichko2002 wants to merge 1 commit intomozilla-mobile:mainfrom
MarkKirichko2002:fix-25645
Open

Fix #25645 - RTL layout issues in URLBar#31851
MarkKirichko2002 wants to merge 1 commit intomozilla-mobile:mainfrom
MarkKirichko2002:fix-25645

Conversation

@MarkKirichko2002
Copy link

Fixed incorrect RTL rendering of URLBar elements: overlapping and mispositioned components in right-to-left languages (Arabic, Hebrew, etc.).

Changes:

  • Switched stop/reload button constraints to directional trailing.equalToSuperview().inset(...) instead of conflicting leading/trailing to urlBarBorderView
  • This resolves the main overlap of the arrow/chevron on the URL text field
  • Auto Layout automatically handles correct side placement (right in LTR, left in RTL)
  • LTR behavior remains unchanged (tested in English/Russian)

Addresses the core issue of overlapping urlbar elements in RTL as reported in #25645.

Fixes #25645

Use directional trailing anchor for stopReloadButton instead of conflicting leading/trailing constraints to urlBarBorderView.
This ensures proper positioning in RTL languages (Arabic, Hebrew) without overlapping the URL text field, while preserving LTR behavior.
@MarkKirichko2002 MarkKirichko2002 requested a review from a team as a code owner January 28, 2026 10:36
@thatswinnie thatswinnie requested review from razvanlitianu and thatswinnie and removed request for thatswinnie January 28, 2026 12:54
@razvanlitianu
Copy link
Collaborator

hi @MarkKirichko2002. Thanks for the PR. One small request can you adjust the x padding to match the left to right languages?
Simulator Screenshot - iPhone 17 Pro - 2026-01-29 at 16 12 55
Simulator Screenshot - iPhone 17 Pro - 2026-01-29 at 16 09 47

@janbrasna
Copy link
Contributor

There are probably tricks for that, how reasonably could the "‹" chevron be flipped to point "›" opposite direction which would be probably more desirable as "back" affordance for RTL UIs?

@janbrasna
Copy link
Contributor

Ah yeah, before there were imageFlippedForRightToLeftLayoutDirection() additions for that e.g. in f3d4f1b

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[RTL] Focus iOS: Incorrect rendering of the urlbar elements, some are overlapping others

3 participants