1095359 - Thumbnails are wrongly displayed on Ebay mobile site

Status: RESOLVED FIXED

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

Description

[Cristina Madaras, QA [:CristinaM]]

Attachment: 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.

Comment 1

[Karl Dubost💡 :karlcow]

Attachment: 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.

Comment 2

[Karl Dubost💡 :karlcow]

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;
}

Comment 4

[Karl Dubost💡 :karlcow]

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.

Comment 5

[Karl Dubost💡 :karlcow]

Let me add again the dependency because we are in the process of fixing it.
Bug 823483 about max-width.

Comment 6

[Karl Dubost💡 :karlcow]

Ah interesting  https://bugzilla.mozilla.org/show_bug.cgi?id=823483
didn't fix it.

Let's put this back on needsdiagnosis

Comment 7

[Karl Dubost💡 :karlcow]

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

Comment 8

[Karl Dubost💡 :karlcow]

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.

Comment 9

[Karl Dubost💡 :karlcow]

^^ previous comment :O)

Comment 10

[Daniel Holbert [:dholbert]]

Attachment: 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.

Comment 11

[Daniel Holbert [:dholbert]]

Attachment: 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.

Comment 12

[Daniel Holbert [:dholbert]]

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.)

Comment 13

[Daniel Holbert [: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)

Comment 14

[Karl Dubost💡 :karlcow]

Thanks Daniel. 

Contacted Jonathan Gabbai at Ebay.

Comment 15

[Mike Taylor [:miketaylr]]

Karl, do you think we could try our ebay ML? This is still an issue.

Comment 16

[Karl Dubost💡 :karlcow]

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.

Comment 17

[Mike Taylor [:miketaylr]]

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. :)

Comment 18

[Karl Dubost💡 :karlcow]

ah sorry to have not made it clear in the previous comment. I recontacted them today. :)

Comment 19

[Mike Taylor [:miketaylr]]

Perfect, thank you!

Comment 20

[Desigan Chinniah [:cyberdees] [:dees] [London - GMT]]

eBay folks (via the ML) have confirmed that they are tracking this internally...

Comment 21

[Mike Taylor [:miketaylr]]

This is fixed now, hooray!

Comment 22

[Mike Taylor [:miketaylr]]

(In reply to Mike Taylor [:miketaylr] (58 Regression Engineering Owner) from comment #21)
> This is fixed now, hooray!

Oops, I was testing in Chrome. >_<

Comment 23

[Karl Dubost💡 :karlcow]

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.

Comment 24

[Karl Dubost💡 :karlcow]

Recontacted Ebay today with the new information.

Comment 25

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 26

[Raul Bucata]

The issue has been fixed and it is no longer reproducible:

https://prnt.sc/Ikem7m2J-Nzt
https://prnt.sc/Qw3NVJfWT4uR

Tested with:

Browser / Version: Firefox Nightly 100.0a1 (2015869419 -🦎100.0a1-20220317092857🦎)
Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density)