Closed Bug 1695614 Opened 2 years ago Closed 2 years 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)

Product:
Firefox
Component:
Messaging System
Platform:
Desktop
All
Type:
defect

Tracking

()

Status:
VERIFIED FIXED
Milestone:
88 Branch
Iteration:
88.1 - Feb 22 - Mar 7
Tracking Flags:
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)

focus.gif
200.88 KB, image/gif
Details
Bug 1695614 - Fix z-index on theme tiles to prevent clipping in RTL
48 bytes, text/x-phabricator-request
Details | Review
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

https://hg.mozilla.org/mozilla-central/rev/3e5329179b67

Status: NEW → RESOLVED
Closed: 2 years ago
status-firefox88: affected → fixed
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
status-firefox88: fixed → verified

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

status-firefox86: affected → wontfix
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.