1426651 - [ebay] Formatting issues on filters inside the “More refinements..”

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect, P5)

Description

[Anca Soncutean, Desktop QA]

Attachment: vehicle mileage filters

[Affected versions]:
- Nightly 59.0a1
- Firefox 58.0b11
- Firefox 57.0.2

[Affected platforms]:
- Win 10 x64
- Ubuntu 12.04 x32
- macOS 10.12

[Steps to reproduce]:
1. Go to the https://www.ebay.ca/b/Cars-Trucks/6001/bn_1865117 
2. Click on the “More refinements...” 
3. Click on the "Vehicle mileage" or “Vehicle Title” option
4. Observe the displayed content 

[Expected result]:
- The content is properly fitted inside the modal

[Actual result]:
- There is not enough space between the filters checkboxes columns
- On Ubuntu “)” is displayed on the second row by itself

[Regression range]:
- This is not a regression; I tried to determine one using mozregression, but this issue was still visible in build 4.0b9.

Comment 1

[Daniel Holbert [:dholbert]]

This isn't a Firefox bug.  This is just a fragile layout at eBay -- they've got hardcoded container sizes here, and if the text/checkboxes are a bit wider than they expect (which they can be, on the web), then stuff doesn't fit.

In particular, the modal dialog (<div role="document">) has "max-width: 660px", which ends up establishing its size.
 * If I disable that declaration in Firefox, it gets a bit wider and everything is fine.
 * If I reduce 660px e.g. to 620px in Chrome, then I see similar breakage to what's being reported as a Firefox bug here.


Checkboxes and font-choice is platform/browser-dependent.  But FWIW, for me, the checkboxes are 18px wide on Firefox vs. 13px wide on Chrome.  And the first text label -- "Less than 1000 miles (1,814)" -- is 161px wide in Firefox vs 158px wide in Chrome.

So for me, in Firefox, each "line" of content is roughly 16px wider in Firefox as compared to Chrome, and unfortunately that pushes it wide enough to trip over the hardcoded sizes here.

The correct fix here is for eBay to test this layout with longer-than-expected text labels and make sure it lays out gracefully (which it doesn't right now), to account for between-browser differences in text/widget sizing.

Comment 2

[Daniel Holbert [:dholbert]]

Also -- "Vehicle Title" shows the linewrapping in Chrome -- not just in Firefox. (Some of the labels are quite long -- "Lemon & Manufacturer Buyback (44)" and "Rebuilt, Rebuildable & Reconstructed (354)".  Both of those labels wrap for me in Chrome.)

I'm not sure this is really broken enough to merit reaching out to eBay about -- it seems like just a known limitation of their design, where long labels will linewrap and break the illusion of "rows" of checkboxes... so perhaps this should just be RESOLVED|INVALID.

Except for this part:
> - On Ubuntu “)” is displayed on the second row by itself

This part seems like a legitimate Firefox bug, but I cannot reproduce it (on Ubuntu 16.04 64-bit).  My rendering looks pretty much like your screenshot, with the *full* parenthesized number wrapping to the second line -- not just the ")".

(I tried using devtools to shorten the line, to prompt less of the parenthesized number to wrap, but I still couldn't reproduce. The whole parenthesized number either wraps or does-not-wrap, as an atomic unit.)

Anca: could you attach a screenshot of the ")" wrapping?  And do you happen to have a more recent Ubuntu version available to test?  If this only happens on ancient 2012-era Ubuntu but not on newer versions (perhaps due to some weird system-font difference) -- then this probably isn't worth worrying about...

Comment 3

[Anca Soncutean, Desktop QA]

Attachment: screenshot for Ubuntu

Here you have a screenshot for Ubuntu 12.04 x32 vs 16.04 x64. Unfortunately I don't have a latest version. I hope though this is helpful!

Comment 4

[Karl Dubost💡 :karlcow]

Design has changed.
And this was happening in all browsers. non-compat.