1336332 - [viewport] width=device-width with an overflow image

Status: RESOLVED DUPLICATE of bug 1423709

(Core :: Panning and Zooming, defect, P3)

Description

[Karl Dubost💡 :karlcow]

Attachment: test-0003-fx54.0a1.20170201-and4.4.4.png

(change the product/component adequately if I missed something)

This issue is part of a couple of tests, I'm doing comparing Firefox Android and Chrome Android for layout differences wrt viewport values.
The tests are available at http://la-grange.net/2016/12/01/viewport/

Test 0003 - <name="viewport" content="width=device-width">
http://la-grange.net/2016/12/01/viewport/viewport-test-0003.html


* Firefox sets the width of documentElement to the width of the device and let the image overflow.  It is possible to scroll horizontally.
* Chrome sets also the width of documentElement to the width of the device but shows the full image.

Comment 1

[Karl Dubost💡 :karlcow]

Attachment: test-0003-chr55.02883.91-and4.4.4.png

* Firefox test-0003-fx54.0a1.20170201-and4.4.4.png
* Chrome  test-0003-chr55.02883.91-and4.4.4.png

Comment 2

[Karl Dubost💡 :karlcow]

https://webcompat.com/issues/4481

* Because the content is not being resized to the viewport like Chrome does ( Bug 1336332 )
* we get the issue of not being able to scroll because of overflow ( Bug 1336346 )

<meta name="viewport" content="width=device-width">

html, body, nav {
	width: 748px !important;
	overflow-x: hidden !important;
	position: relative;
}

Comment 3

[Karl Dubost💡 :karlcow]

Probably a variation of this issue.

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
The header is getting the right size, but the main content is constrained by 


.singular .entry-main {
	width: 100%;
	height: 100%;
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 820px;
	-ms-flex: 1 1 820px;
	flex: 1 1 820px;
	-webkit-align-self: flex-start;
	-ms-flex-item-align: start;
	align-self: flex-start;
}


which makes it jump out of the window on Firefox.
While on Chrome Android the content is being resized to fit the viewport.

We can fix it with `flex: 1 1 auto;` instead of `flex: 1 1 820px;`

Comment 4

[Daniel Holbert [:dholbert]]

comment 3 is really closer to bug 1331692 (which is part of bug 1136312), as I've now noted on https://webcompat.com/issues/4746