910098 - images in tables on wikipedia (mobile) resized beyond viewport's width when page load is done

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Mathieu Pellerin]

Browsing Wikipedia on Firefox Android is hampered by an issue which results in tables elements growing beyond viewport's width due to images in these tables resized when page load is done.

Steps to reproduce:
1. Visit a wikipedia page with a summary table featuring a landscape image (for e.g. http://en.m.wikipedia.org/wiki/Bialowieza_Forest)
2. When page load is over, you'll notice the landscape image at the top of the summary table will be resized beyond viewport width, and with it resizing the whole table

Comment 1

[Kartikaya Gupta (email:[e-mail])]

What device and version of Firefox are you seeing this on? I'm unable to reproduce on my Galaxy Q running nightly.

Comment 2

[Mathieu Pellerin]

I'm seeing this on Firefox's latest nightly build, without any add-on installed. My device is a Samsung Galaxy Note 2.

Comment 3

[Kartikaya Gupta (email:[e-mail])]

Aaron, can you repro on the Note 2? (IIRC you have one but I could be wrong)

Comment 4

[Aaron Train [:aaronmt]]

Attachment: Nightly (09/08) - Screenshot

(In reply to Kartikaya Gupta (email:[e-mail]) from comment #3)
> Aaron, can you repro on the Note 2? (IIRC you have one but I could be wrong)

Yes; and this is a regression.

Comment 5

[Aaron Train [:aaronmt]]

Attachment: Firefox 23/24 - Screenshot

Proper formatting in Firefox 24 on the mozilla-beta channel (and similar formatting in Firefox 23 on the mozilla-release channel).

This seems to be a regression currently starting on mozilla-aurora.

Comment 6

[Aaron Train [:aaronmt]]

http://hg.mozilla.org/mozilla-central/pushloghtml?startdate=2013-07-04&enddate=2013-07-05

Bug 803207?

Comment 7

[Kartikaya Gupta (email:[e-mail])]

Ok, I can repro on HiDPI devices. I am able to reproduce on desktop too if I simulate the behaviour of a Hi-DPI device (i.e. set layout.css.devPixelsPerPx to 2.0, switch to a Fennec UA string, and use responsive design mode to have a smaller window). I believe this is either intended behaviour or a tech evangelism issue. It could be that they worked around our previous incorrect behaviour and now that we are returning correct values for window.devicePixelRatio and CSS media queries it is behaving incorrectly or exposing a bug in the wikimedia code. Moving to Evangelism.

Comment 8

[Hallvord R. M. Steen [:hallvors]]

This is the JS: https://gist.github.com/hallvors/6549877
I don't see any sniffing, and the same code runs in the Android browser. Without being very familiar with srcset logic, it all seems to make sense to me. The image has height and width specified. Why does it grow when .src is set to an image with bigger dimensions?

Unless someone can point out a problem in this code, it doesn't seem like a Tech Evangelism issue.

Comment 9

[Kartikaya Gupta (email:[e-mail])]

Yeah I think you're right. I didn't realize that the width and height properties were set on the image element. If that is the case then layout shouldn't be resizing the image to be larger in CSS pixels if the devicePixelRatio goes up. However that appears to be what it is doing.

Move to core layout. Thanks for looking into this Hallvord!

Comment 10

[Kevin Brosnan [Ex-Mozilla]]

This regressed before 2013-07-22 as I tested a build from that date.

Comment 11

[Hallvord R. M. Steen [:hallvors]]

Attachment: 910098.htm - demo of problem

Comment 12

[Hallvord R. M. Steen [:hallvors]]

I knew there would be something more to this story, so I had another look..

Wikipedia applies some CSS here that contributes to the problem, namely

.image img{width:auto!important; height:auto!important}

So, this (in Gecko) overrides the <img width="284" height="189"> attributes for this image and makes it grow when src is set to a larger graphic. To me this looks like a reasonable thing to do. It's not what the normal WebKit-based browser on Android does. However, Opera Mobile (Presto) does like Firefox - and since I personally think that's correct behaviour (without being deeply familiar with the CSS spec here) I'll grab this for Tech Evang again..

Comment 13

[Hallvord R. M. Steen [:hallvors]]

Ryan, a (newly added?) script for faking @srcset support is causing trouble here. Known?

Comment 14

[Boris Zbarsky [:bzbarsky]]

> So, this (in Gecko) overrides the <img width="284" height="189"> attributes

That's what the CSS spec requires it to do, yes.

Comment 15

[Boris Zbarsky [:bzbarsky]]

And thank you very much for digging into this!

Comment 16

[Brion Vibber]

I believe this is https://bugzilla.wikimedia.org/show_bug.cgi?id=49440

Comment 17

[Alex Keybl [:akeybl]]

Not tracking given low criticality and the fact that this is now a well-owned TE issue. Hallvord, seems like you've got this?

Comment 18

[Hallvord R. M. Steen [:hallvors]]

Yes, I'll handle it.
Clearing the needinfo for Ryan because there is a known bug over there.

Comment 19

[Mike Taylor [:miketaylr]]

This blog post seems to be describing this issue: http://blog.room34.com/archives/5042

Comment 20

[Hallvord R. M. Steen [:hallvors]]

They are fixing the problem: https://gerrit.wikimedia.org/r/#/c/84544/3/stylesheets/common/hacks.css