[viewport] maximum-scale = 0 in meta viewport makes the viewport awfully wide

RESOLVED FIXED in Firefox 64

Status

()

defect
P3
normal
RESOLVED FIXED
2 years ago
10 months ago

People

(Reporter: karlcow, Assigned: hiro)

Tracking

(Blocks 1 bug)

59 Branch
mozilla64
Unspecified
Android
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox64 fixed)

Details

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

Attachments

(7 attachments)

This is a spin-off of https://webcompat.com/issues/14888

STR:

1. Go to https://www.looopings.nl/

Actual:
Enjoy a very very wide website

Expected:
The site fits the screen like in Chrome.


Why this is happening:

The site contains the line

<meta name="viewport" content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 0">


maximum-scale = 0 is putting the layout completely off.
Component: Layout: View Rendering → Panning and Zooming
Summary: maximum-scale = 0 in meta viewport makes the viewport awfully wide → [viewport] maximum-scale = 0 in meta viewport makes the viewport awfully wide
Whiteboard: [webcompat] → [webcompat][gfx-noted]
I think this bug will be solved by implementing "Resolve min-zoom and max-zoom values" [1] in the spec.

[1] https://drafts.csswg.org/css-device-adapt/#constraining-min-max-zoom
Assignee: nobody → hikezoe
Status: NEW → ASSIGNED
Interesting just happens to have a new issue with this.
(In reply to Karl Dubost :karlcow from comment #2)
> Interesting just happens to have a new issue with this.

So something interesting also with this issue 
https://webcompat.com/issues/19179

On responsive design mode (RDM) with Firefox Android UA and 360x640 window, we get a wide layout too, even if **meta viewport** is not supposed to be interpreted by RDM. but if we just go out of the RDM, and not reloading (so the mobile layout), we get a layout working even when resizing the window.
(In reply to Karl Dubost :karlcow from comment #3)
> On responsive design mode (RDM) with Firefox Android UA and 360x640 window,
> we get a wide layout too, even if **meta viewport** is not supposed to be
> interpreted by RDM. but if we just go out of the RDM, and not reloading (so
> the mobile layout), we get a layout working even when resizing the window.

Note that as of a few days ago (bug 1290420), RDM noew respects meta viewport.
Here are two screenshots of the site with adding below meta tag in comment 0 (because the site has already dropped the meta tag).

 <meta name="viewport" content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 0">
 
Left side is the result of current m-c, right one is the result of the binary in the try.  The too wide content is actually being mitigated by the "Resolve min-zoom and max-zoom values" to some extent, but sill wider than Chrome.  I think it is because of bug 1423709 and other bugs.  Anyway I am going to fix one by one.
nsContentUtils::GetViewportInfo was removed and the comment for the function
was moved to nsIDocument::GetViewportInfo in
https://hg.mozilla.org/mozilla-central/rev/37d64688bf9d

Depends on D8316
https://drafts.csswg.org/css-device-adapt/#constraining-min-max-zoom

The test case in this commit fails without this change, width will be 8000 and
height will be 4800 respectively when it fails.

Depends on D8320
See Also: → 1440003
For the reference (and requested by Botond in review), I should have noted what happened when 'maximum-scale=0' is specified along with initial-scale=1.


1. https://hg.mozilla.org/mozilla-central/file/87b544fc71d5/dom/base/nsDocument.cpp#l7327
 
    mScaleMaxFloat = mozilla::clamped(                                          
        mScaleMaxFloat, kViewportMinScale, kViewportMaxScale);

  Here, the maximum-scale=0 is clamped to kViewportMinScale which is 0.1.

2. https://hg.mozilla.org/mozilla-central/file/87b544fc71d5/dom/base/nsDocument.cpp#l7452

    if (mValidScaleFloat && scaleFloat >= scaleMinFloat && scaleFloat <= scaleMaxFloat) {
      CSSSize displaySize = ScreenSize(aDisplaySize) / scaleFloat;              
      size.width = std::max(size.width, displaySize.width);                     
      size.height = std::max(size.height, displaySize.height);                  
    } else if (effectiveValidMaxScale) {                                        
      CSSSize displaySize = ScreenSize(aDisplaySize) / scaleMaxFloat;           
      size.width = std::max(size.width, displaySize.width);                     
      size.height = std::max(size.height, displaySize.height);                  
    }

  Here, |scaleMaxFloat| is 0.1, thus we fails the first if check then effectiveValidMaxScale is true since we have a valid maximum-scale even if it's clamed, so we divide the screen size by |scaleMaxFloat|, which means the viewport size is 10 times bigger than the screen size.  And of course, unfortunately there is 'initial-scale=1'.
Pushed by hikezoe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/ecc77355ba3e
Align boolean member in nsViewportInfo. r=botond
https://hg.mozilla.org/integration/autoland/rev/930561bbe55d
Fix the comment for nsIDOMWindowUtils.getViewportInfo. r=botond
https://hg.mozilla.org/integration/autoland/rev/4a79571c40a0
Move getViewportInfo function into viewport_helpers.js. r=botond
https://hg.mozilla.org/integration/autoland/rev/d455d8d93e2c
Rewrite test_meta_viewportX.html with add_task. r=botond
https://hg.mozilla.org/integration/autoland/rev/02de107cdac4
Run meta viewport tests on Desktop. r=botond
https://hg.mozilla.org/integration/autoland/rev/2e7851b166ce
Implement "Resolve min-zoom and max-zoom values" in the spec. r=botond
Blocks: 1440003
See Also: 1440003
You need to log in before you can comment on or make changes to this bug.