m.huffingtonpost.fr - images overblown on mobile site

[webcompat-bot]

URL: http://m.huffingtonpost.fr/2016/08/24/melenchon-applaudit-les-candidatures-de-montebourg-et-hamon-a-la/
Browser / Version: Firefox Mobile 52.0
Operating System: Android 6.0.1
Problem type: Mobile site is not usable

Steps to Reproduce

1. Navigate to: http://m.huffingtonpost.fr/2016/08/24/melenchon-applaudit-les-candidatures-de-montebourg-et-hamon-a-la/
2. …

Expected Behavior:

Actual Behavior: text overflows

From webcompat.com with ❤️

[karlcow]

When the article loads the pictures are at first at the right size, then suddenly get overblown.

It follows the css

.entry .author-card, .entry .author-list, .entry .top-media--image img {
	width: 100%;
}

so that's normal. There is probably something higher up in the hierarchy making the width bigger than what it is.

This is happening probably in .col

Ha! probably found!

#um_ultimedia_wrapper_wrap_widget_default #um_ultimedia_wrapper_list_ultimedia #um_ultimedia_wrapper_carousel_ultimedia {
	width: 20000em;
}

which translate to 240000px

The value is the same in Chrome fwiw but the interpretation by the rendering engines are different.

[karlcow]

If I remove the html code for #um_ultimedia_wrapper_wrap_widget_default #um_ultimedia_wrapper_list_ultimedia #um_ultimedia_wrapper_carousel_ultimedia then the images are the right size.

but why the difference in between chrome and firefox here.
@dholbert

[dholbert]

This seems to be an issue with flexbox and the default min-width:auto behavior on flex items (which prevents flex items from being any smaller than their intrinsic sizes).

If I give min-width:0 to the img's .col ancestor, the issue seems to go away (in Firefox).

[dholbert]

So .col has an explicit width applied:

.col {
width: 100% !important;

...which should neuter the bad effects of min-width:auto here. But it's not having that effect in Firefox right now, for some reason.

I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1331692 on this with a reduced testcase.

[karlcow]

Thanks @dholbert

[karlcow]

Just to keep the paper trail right. The correct dependency is now
https://bugzilla.mozilla.org/show_bug.cgi?id=1136312

Switching to needscontact

[karlcow]

Let me switch again to needsdiagnosis.

What I noticed when the page is being displayed. The image fits right at first. But then they explode when the following script is loaded.

14:28:08.693 Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead[Learn More] 1 responsivev3-bis.js:1

ok I could fix it.

Currently they used:

.col {
	width: 100% !important;
	max-width: none !important;
	padding-left: 0;
	padding-right: 0;
}

If I replace with

.col {
	width: 100% !important;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

switching again to needscontact

[karlcow]

Their contact page gives an email address: aide@huffingtonpost.fr
http://www.huffingtonpost.fr/p/nous-contacter

[karlcow]

[karlcow]

Just contacted.

[karlcow]

contacted also through the partner mailing list.

[adamopenweb]

This page no longer exists. Let's close in favour of #23259.