804584 - Viewport initial-scale & minimum-scale gives unexpected behaviour

Status: RESOLVED INVALID

(Firefox for Android Graveyard :: Toolbar, defect)

Description

[Beanow]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:18.0) Gecko/18.0 Firefox/18.0
Build ID: 20121014105452

Steps to reproduce:

Having an html page with: <meta name="viewport" content="initial-scale=1, minimum-scale=0.5, maximum-scale=2">

(On HTC Desire HD, 480x800 @ 255dpi)

Trying to zoom out to smaller than scale 1.


Actual results:

The minimum-scale property is ignored. Instead initial-scale is treated as the minimum scale. The maximum scale is respected however.


Expected results:

The initial-scale should be initial, instead of being used as a minimum.

Comment 1

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

Do you have a test page that demonstrates the issue?

Comment 2

[Matt Brubeck (:mbrubeck)]

I think this is the intended behavior, and matches the CSS Device Adaptation draft:
http://dev.w3.org/csswg/css-device-adapt/#constraining-viewport-descriptor-values

If "initial-scale" is specified but "width" is not specified, then width will be inferred based on initial-scale.  In this case, since initial-scale=1, width will be set to the device-width.

Fennec does not allow scaling a page so its width is smaller than the screen width, so it won't be possible to zoom this page any smaller than 100% even though the viewport settings would allow it.

How do other browsers handle this case?

Comment 3

[Beanow]

(In reply to Kartikaya Gupta (:kats) from comment #1)
> Do you have a test page that demonstrates the issue?

I have an example now: http://wip.tuxion.nl/ffdebug/

(In reply to Matt Brubeck (:mbrubeck) from comment #2)
> I think this is the intended behavior, and matches the CSS Device Adaptation
> draft:
> http://dev.w3.org/csswg/css-device-adapt/#constraining-viewport-descriptor-
> values
> 
> If "initial-scale" is specified but "width" is not specified, then width
> will be inferred based on initial-scale.  In this case, since
> initial-scale=1, width will be set to the device-width.
> 
> Fennec does not allow scaling a page so its width is smaller than the screen
> width, so it won't be possible to zoom this page any smaller than 100% even
> though the viewport settings would allow it.
> 
> How do other browsers handle this case?

What the default android browser does is to accept the scale range given 0.5 - 2 and start with scale 1. Opera Mobile however also uses the 1 - 2 scale range.

Looking at the procedure though you linked me and assuming that the term zoom is used instead of scale. The procedure only confines the max-zoom level to not be larger than the min-zoom level but I don't see where the zoom level is confined to the device width.

Comment 4

[Matt Brubeck (:mbrubeck)]

(In reply to Beanow from comment #3)
> I have an example now: http://wip.tuxion.nl/ffdebug/
> 
> What the default android browser does is to accept the scale range given 0.5
> - 2 and start with scale 1. Opera Mobile however also uses the 1 - 2 scale
> range.

The scale is constrained to the range [1, 2] in the stock browser on my Motorola Xoom (Android 4.1), Chrome on the same device, Safari my iPod Touch, and IE10 on a Windows 8 Metro tablet.

The scale is constrained to the range [0.5, 2] in the stock browser on my Samsung Galaxy Tab 7" (Android 2.3).  To make this possible, this browser seems to change the viewport width as you zoom out.

> Looking at the procedure though you linked me and assuming that the term
> zoom is used instead of scale. The procedure only confines the max-zoom
> level to not be larger than the min-zoom level but I don't see where the
> zoom level is confined to the device width.

The relevant step is this one.  When "zoom" (initial-scale) is 1.0, then this sets width equal to "initial-width" (device-width):

7. If width is ‘auto’, and height is ‘auto’, set width = (initial-width / zoom)

This, *combined* with the fact that Firefox (like most other mobile browsers) does not allow panning or zooming past the edge of a document, effectively means that the page can't be zoomed out smaller than 100%.  The only way to allow it would be to increase the page width, either automatically (as in some Android browsers), or by explicitly setting a larger viewport width, or by adding an element to the page that is wider than the viewport.

Since Firefox's behavior is consistent with the spec, and with current versions of other browsers, I'm going to resolve this as invalid.  Thank you for the report and test case though, since this is a tricky use case to solve in current browsers and we should make sure that we support it better in the future.

Firefox doesn't currently have a way to set the viewport width to (2*device-width) without also setting the initial-scale to 0.5.  When we add support for the @viewport rule (bug 747754) then you could use the following CSS.  I think this currently works in Opera Mobile and in IE10:

 @viewport {
   width: 200%;
   min-zoom: 0.5;
   max-zoom: 2.0;
   initial-zoom: 1;
 }

Another possible solution is "body { width: 2vw; }" which should work in Chrome 20, Firefox 19 (bug 503720), IE9, and Safari 6.