Closed Bug 1695614 Opened 2 months ago Closed 2 months ago

The blue border of a selected theme card is cut off by its image in the Arabic about:welcome “Theme” slide

Categories

(Firefox :: Messaging System, defect, P1)

Desktop
All
defect

Tracking

()

VERIFIED FIXED
88 Branch
Iteration:
88.1 - Feb 22 - Mar 7
Tracking Status
firefox86 --- wontfix
firefox87 --- wontfix
firefox88 --- verified

People

(Reporter: mheres, Assigned: emcminn)

References

(Blocks 1 open bug)

Details

Attachments

(2 files, 2 obsolete files)

Attached image focus.gif

[Affected versions]:

  • Firefox Release 86.0 (Build ID: 20210222142601)
  • Firefox Beta 87.0b4 (Build ID: 20210228185859)
  • Firefox Nightly 88.0a1 (Build ID: 20210301093612)

[Affected Platforms]:

  • Windows 10
  • Linux Mint 20
  • macOS 10.15

[Prerequisites]:

  • Use the AR locale of Firefox.
    OR
  • Have the Arabic language set as display language for Firefox ("about:preferences" > "General” > “Language” > “Choose the languages used to display menus, messages, and notifications from Firefox.” > “Set Alternatives”).
  • Have Firefox open.

[Steps to reproduce]:

  1. Navigate to “about:welcome”.
  2. Click the “Not now” button twice to reach the Theme slide.
  3. Select a theme card and observe its border.

[Expected result]:

  • The blue border of the selected card is completely visible.

[Actual result]:

  • The border of the selected card is half obscured by the card icon.

[Notes]:

  • Attached is a recording of the issue.
Assignee: nobody → emcminn
Iteration: --- → 88.1 - Feb 22 - Mar 7
Priority: -- → P1

So it looks like what's happening here is we're doing a transform scale(-1) to flip the card image for RTL locales. this is causing the image to come out of the stacking context and sit on top of the border. A simple way to fix this would be to remove the offset on the card border; that way it'll sit just outside the image and doesn't overlap no matter how the elements are stacked. This changes the style just a bit though, so we'd need R+ from UX. (I'll attach some screenshots to show the difference.)

We've found another workaround, so we can keep the offset :)

Attached image border with offset (obsolete) —
Attached image border without offset (obsolete) —
Attachment #9206759 - Attachment is obsolete: true
Attachment #9206760 - Attachment is obsolete: true
Attachment #9206697 - Attachment description: Bug 1695614 - Remove offset from theme tile border to prevent clipping in RTL → Bug 1695614 - Fix z-index on theme tiles to prevent clipping in RTL
Pushed by emcminn@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/3e5329179b67
Fix z-index on theme tiles to prevent clipping in RTL r=pdahiya
Status: NEW → RESOLVED
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → 88 Branch

We have verified that the issue is no longer reproducible on Firefox Nightly 88.0a1 (Build ID; 20210305085604) using Windows 10, Linux Mint 20 macOS 10.15.7. The border is now visible.

Status: RESOLVED → VERIFIED

Does this need uplit to 87 or can it ride the trains?

Flags: needinfo?(emcminn)

(In reply to Julien Cristau [:jcristau] from comment #8)

Does this need uplit to 87 or can it ride the trains?

I think this is ok to ride trains! It was just a small visual issue and doesn't affect the actual translation.

Flags: needinfo?(emcminn)
You need to log in before you can comment on or make changes to this bug.