Open Bug 1095359 Opened 5 years ago Updated 7 months ago

Thumbnails are wrongly displayed on Ebay mobile site

Categories

(Web Compatibility :: Mobile, defect, P1)

ARM
Android
defect

Tracking

(platform-rel +, firefox33 affected, firefox34 affected, firefox35 affected, firefox36 affected, firefox37 affected, firefox38 affected, firefox39 affected, firefox40 affected, firefox41 affected, firefox42 affected, firefox43 affected, firefox44 affected, firefox45 affected, firefox46 affected, firefox47 affected, firefox48 affected, fennec-, firefox61 affected, firefox62 affected, firefox63 affected, firefox64 affected)

REOPENED
Tracking Status
platform-rel --- +
firefox33 --- affected
firefox34 --- affected
firefox35 --- affected
firefox36 --- affected
firefox37 --- affected
firefox38 --- affected
firefox39 --- affected
firefox40 --- affected
firefox41 --- affected
firefox42 --- affected
firefox43 --- affected
firefox44 --- affected
firefox45 --- affected
firefox46 --- affected
firefox47 --- affected
firefox48 --- affected
fennec - ---
firefox61 --- affected
firefox62 --- affected
firefox63 --- affected
firefox64 --- affected

People

(Reporter: CristinaM, Assigned: karlcow)

References

()

Details

(Keywords: testcase-wanted, webcompat:site-wait, Whiteboard: [country-all] [css] [sitewait][platform-rel-eBay])

Attachments

(4 files)

Attached image ebay.png
Environment
Device: Nexus 4 (Android 4.4.4)
Build: Firefox for Android 36.0a1 (2014-11-06)

Steps to reproduce:
1. Launch Fennec;
2. Go to m.ebay.com.

Expected results:
No layout problems are displayed.

Actual results:
Thumbnails are not displayed correctly.

Notes: Please see the attachment.
Component: General → Mobile
Product: Firefox for Android → Tech Evangelism
Attached image ebay-mobile-firefox.png
0. Firefox 35 Desktop with Fake firefox Android UA.
1. Go to http://www.ebay.com/
2. Be redirected to http://m.ebay.com/

Emulating Google Nexus on Opera 26 receives a perfectly working mobile site.

Changing the UA for the Chrome Mobile UA on Firefox doesn't solve the issue.


It's an issue we start to have too often compared to Blink rendering engine:


.mainCatCntr .stackone .stackImg{
	display:block;
	position:absolute;
	top:0;
	z-index:1;
	max-height:94px;
	max-width:100%;
	border-radius:2px 2px 0 0
}

The max-width: 100% is not being applied.
The nesting context is a div with a display: table-cell.
Then above an anchor a with a display: table.

We can solve it by setting width: 100%; but then the images would stretch for larger viewports. So it's not a solution.

We should look at the Web compatibility story here with other browsers.
Whiteboard: [country-all] [css] [notcontactready]
A way to fix this is to add "table-layout:fixed" on the nesting "a" element.

.mainCatCntr .stackone .catImgBkg a {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    padding-bottom: 45px;
    padding-top: 10px;
}
Depends on: 975632
Duplicate of this bug: 1140699
By removing the `display: table` the issue is fixed.

```css
.mainCatCntr .stackone .catImgBkg a {
	/* display: table; */
	width: 100%;
	height: 100%;
	padding-bottom: 45px;
	padding-top: 10px;
}
```

They changed the previous behavior. So it's a different issue now. I'm removing the dependency.
The max-width is not there anymore.
No longer depends on: 975632
tracking-fennec: --- → ?
tracking-fennec: ? → -
Let me add again the dependency because we are in the process of fixing it.
Bug 823483 about max-width.
Depends on: 823483
Ah interesting  https://bugzilla.mozilla.org/show_bug.cgi?id=823483
didn't fix it.

Let's put this back on needsdiagnosis
Whiteboard: [country-all] [css] [notcontactready] → [country-all] [css] [needsdiagnosis]
The markup is 

```html
<div class="verticalAlign ">
   <div class="popCategorySprite" 
        style="background-position: 0px 0px; 
               background-image: url(&quot;http://p.ebaystatic.com/aw/mobile/mobileWeb/popular_categories/spr/us-w188x178-q50-v1.jpg&quot;);">
   </div>
</div>
```


The .verticalAlign is defined as:


```
.mainCatCntr .stackone .catImgBkg a .verticalAlign {
	display: table-cell;
	vertical-align: middle; 
}
```

When removing the `vertical-align: middle;` nothing changed in Blink,
but Firefox moves the position upper.


In Firefox the box is 106.533 x 134
In Opera   the box is 106 x 89
Daniel,

Before trying to recontact Ebay on this one. I would like to be sure of the difference in between Firefox and Blink and what's causing it. If it's an issue in Firefox we should be fixing it. If not I will gladly open a bug on Chrome and attempt to contact Ebay.
^^ previous comment :O)
Flags: needinfo?(dholbert)
Attached file testcase 1
The layout here is a bit complex; not yet sure which browser has a bug, and whether/how we should do outreach.

To get things kicked off, here's a first reduced testcase. In Firefox, the purple region (which represents the thumbnail in ebay) is towards the bottom of the yellow area (which represents the "tile" in ebay).  In Chrome, it's towards the top instead.
Flags: needinfo?(dholbert)
Attached file testcase 2
Here's a simpler testcase, which I think is still getting at the issue here -- it's got an orange 100%-height table with bottom & top padding (corresponding to the <a> element that has "display:table" from ebay), inside of a fixed-height block container.

The table is the thing that the table-cell is being vertically-aligned inside of.

In Firefox, the orange thing (the table) sticks outside of its container. In Chreme, it does not. I think this is a Chrome bug -- the content-box size is 100%, and padding should be added on top of that, so the orange thing should be taller than its container.
Microsoft Edge agrees with us on the rendering of both testcases, too, BTW. And they agree with us on the (broken-looking) rendering of m.ebay.com. (with Windows 10 mobile UA string -- hit f12, then "emulation", then choose "Windows 10 mobile" as the browser profile)

So, that adds credence to this being a Chrome bug. I have to run, but I'll file a Chrome bug later on with testcase 2, and Karl, please reach out to ebay and get them to fix this (and test in Firefox and/or Edge to verify their fix).  (Not sure offhand what the best fix to suggest would be -- dropping "display:table" as you suggested in comment 4 seems reasonable, though there are so many nested containers here that there's any number of other things they could do to tweak the positioning.)
Flags: needinfo?(dholbert)
I filed https://bugs.chromium.org/p/chromium/issues/detail?id=598134 on this issue in Chrome, and https://bugs.webkit.org/show_bug.cgi?id=155919 on this issue in Safari.

needinfo=karl to do outreach to Ebay, since they're unintentionally depending on a WebKit bug (which Blink inherited)
Flags: needinfo?(dholbert) → needinfo?(kdubost)
Thanks Daniel. 

Contacted Jonathan Gabbai at Ebay.
Assignee: nobody → kdubost
Status: NEW → ASSIGNED
Flags: needinfo?(kdubost)
Whiteboard: [country-all] [css] [needsdiagnosis] → [country-all] [css] [sitewait]
platform-rel: --- → ?
Whiteboard: [country-all] [css] [sitewait] → [country-all] [css] [sitewait][platform-rel-eBay]
platform-rel: ? → +
Karl, do you think we could try our ebay ML? This is still an issue.
Flags: needinfo?(kdubost)
Re-testing in the latest version of Firefox. Still here.

Found new ways to fix it.
Commenting out the vertical-align: middle fixes it.

.mainCatCntr .stackone .catImgBkg a .verticalAlign {
	display: table-cell;
	/* vertical-align: middle; */
}

OR commenting out the height: 100%

.mainCatCntr .stackone .catImgBkg a {
	display: table;
	width: 100%;
	/* height: 100%; */
	padding-bottom: 45px;
	padding-top: 10px;
}

OR commenting out height: 134px

.mainCatCntr .stackone .catImgBkg {
	/* height: 134px; */
	width: 100%;
}



Latest contact I had an email reply from Jonathan, telling me the info had been communicated.
Flags: needinfo?(kdubost)
It might be worth re-pinging since it's been nearly a year. Maybe your new info might convince them the fix is pretty simple. :)
ah sorry to have not made it clear in the previous comment. I recontacted them today. :)
Perfect, thank you!
eBay folks (via the ML) have confirmed that they are tracking this internally...
This is fixed now, hooray!
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
(In reply to Mike Taylor [:miketaylr] (58 Regression Engineering Owner) from comment #21)
> This is fixed now, hooray!

Oops, I was testing in Chrome. >_<
Status: RESOLVED → REOPENED
Priority: -- → P1
Resolution: FIXED → ---
Doing this, completely fix the issue.

```css
.mainCatCntr .stackone {
	display: flex;
	height: 6em;
	flex-direction: column;
}


.mainCatCntr .stackone .catImgBkg a {
	display: flex;
	width: 100%;
	height: 100%;
	padding-bottom: 45px;
	padding-top: 10px;
	justify-content: center;
}
```

We should recontact them.
Recontacted Ebay today with the new information.
Product: Tech Evangelism → Web Compatibility

See bug 1547409. Moving webcompat whiteboard tags to keywords.

You need to log in before you can comment on or make changes to this bug.