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

NEW
Unassigned

Status

()

Core
Panning and Zooming
P3
normal
9 months ago
8 months ago

People

(Reporter: karlcow, Unassigned)

Tracking

54 Branch
ARM
Android
Points:
---

Firefox Tracking Flags

(firefox54 affected)

Details

(Whiteboard: [webcompat][gfx-noted], URL)

Attachments

(2 attachments)

(Reporter)

Description

9 months ago
Created attachment 8833176 [details]
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.
(Reporter)

Comment 1

9 months ago
Created attachment 8833177 [details]
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
(Reporter)

Updated

9 months ago
Whiteboard: [webcompat]
Component: Graphics, Panning and Zooming → Panning and Zooming
OS: Unspecified → Android
Priority: -- → P3
Product: Firefox for Android → Core
Hardware: Unspecified → ARM
Whiteboard: [webcompat] → [webcompat][gfx-noted]
(Reporter)

Comment 2

9 months ago
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;
}
(Reporter)

Comment 3

8 months ago
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 3 is really closer to bug 1331692 (which is part of bug 1136312), as I've now noted on https://webcompat.com/issues/4746
You need to log in before you can comment on or make changes to this bug.