1647178 - The site is not being zoomed out to occupy the full width of the viewport

Status: NEW

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

Description

[Karl Dubost💡 :karlcow]

1. Navigate to https://www.leolist.cc/personals/female-massage/greater-toronto
2. Observe "Terms and conditions" popup (if not agreed previously) or the site layout.

Expected Behavior:
The modal fits the viewport

Actual Behavior:
The modal is larger than the viewport

• This doesn't reproduce on Fennec. So this is a kind of regression.
• The meta viewport is dynamically rewritten with a scale factor, but seems to be done twice.
  See the webcompat issue for the JavaScript rewriting the meta viewport.
  https://webcompat.com/issues/54173

Comment 1

[Botond Ballo [:botond]]

Confirmed that this is a regression.

Comment 2

[Botond Ballo [:botond]]

Regression window points to bug 1514429.

Comment 3

[Botond Ballo [:botond]]

Note that bug 1514429 had the intention of making us behave more like Chrome (in reporting the layout viewport dimensions via innerWidth/Height), and yet on this page, our behaviour matched Chrome's before bug 1514429 and changed afterwards. Some investigation is needed to understand why.

Comment 4

[Brad Werth [:bradwerth] | Out until Feb 2025]

Thanks for finding, and filing.

Comment 5

[Hiroyuki Ikezoe (:hiro)]

From https://github.com/webcompat/web-bugs/issues/54173#issuecomment-647241538

        function forceZoom()
        {
            var ww = window.innerWidth;

            
                if(navigator.userAgent.match(/iP(hone|od|ad)/i)) {
                    var mscale = 1.3;
                    var scalable = 'yes';
                } else {
                    var mscale = 3;
                    var scalable = 'yes';
                }


            if (ww <= 640) {
                var scale = (ww / 640).toFixed(4);
                mscale = scale;

                document.getElementById("viewport").setAttribute('content', 'width=640,initial-scale=' + (scale) + ',minimum-scale=' + (scale) + ', user-scalable=' + scalable + ',maximum-scale=' + mscale + ',minimal-ui,shrink-to-fit=no');
            } else {
                document.getElementById("viewport").setAttribute('content', 'width=640,initial-scale=1.0001,user-scalable=' + scalable + ',maximum-scale=' + mscale + ',minimal-ui,shrink-to-fit=no');
            }
        }

        forceZoom();

After bug 1514429, window.innerWidth is greater thatn 640. Thus, the initial-scale value is 1.0001.

I suspect the site is sniffing UA string somewhere, otherwise we will need to look into Chrome code why the issue doesn't happen on Chrome.

Comment 6

[Hiroyuki Ikezoe (:hiro)]

In RDM on Chrome, I can't see the forceZoom function at all, instead I can see this;

    <script>
        var showTos = false;
        var locale = 'en';
        var ww = window.innerWidth;
        if(ww <= 960){
            var scale = (ww / 1000).toFixed(2);
            document.getElementById("viewport").setAttribute('content', 'width=960,user-scalable=yes,initial-scale=' + scale);
        }

    </script>

Karl, this is probably an issue in the site itself. Can you please double-check the behavior on Chrome?

Comment 7

[Karl Dubost💡 :karlcow]

        var supportsOrientationChange = "onorientationchange" in window,
            orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

        window.addEventListener(orientationEvent, forceZoom, false);

is false in Firefox, and true in chrome.
then orientationEvent = "resize" in Firefox.
and orientationEvent = "orientationchange" in chrome

but I receive the forceZoom in both browsers.

chrome RDM with "Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4179.0 Mobile Safari/537.36"
Firefox RDM with Mozilla/5.0 (Android 10; Mobile; rv:79.0) Gecko/79.0 Firefox/79.0 or Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Mobile Safari/537.36

Another interesting thing is when I try to screenshot the RDM rendering on Firefox with the screenshot button, I get the right layout, but not the one I see on screen.

if I search showTos on Chrome, I have no results. I wonder if they do A/B testing.

Comment 8

[Karl Dubost💡 :karlcow]

On Chrome Canary on the Pixel 2 itself, I receive the same code than Firefox and get the modal zoomed out.

The meta viewport becomes:

<meta name="viewport" id="viewport" content="width=640,initial-scale=0.6438,minimum-scale=0.6438, user-scalable=yes,maximum-scale=0.6438,minimal-ui,shrink-to-fit=no">

Comment 9

[Brad Werth [:bradwerth] | Out until Feb 2025]

I'm getting pulled onto other things. Taking myself off the bug.