Limit the scope of the minimum-scale fix

Author: muodov

injected/integration-test/web-compat.spec.js

@@ -496,7 +496,7 @@ test.describe('Viewport fixes', () => {
             const expectedWidth = width < 1280 ? 980 : 1280;
             const viewportValue = await page.evaluate(getViewportValue);
             expect(viewportValue).toEqual(
-                `width=${expectedWidth}, initial-scale=${(width / expectedWidth).toFixed(3)}, user-scalable=yes, minimum-scale=0`,
+                `width=${expectedWidth}, initial-scale=${(width / expectedWidth).toFixed(3)}, user-scalable=yes`,
             );
         });
 
@@ -511,7 +511,7 @@ test.describe('Viewport fixes', () => {
             const expectedWidth = width < 1280 ? 980 : 1280;
             const viewportValue = await page.evaluate(getViewportValue);
             expect(viewportValue).toEqual(
-                `initial-scale=${(width / expectedWidth).toFixed(3)}, user-scalable=yes, maximum-scale=10, width=${expectedWidth}, minimum-scale=0`,
+                `initial-scale=${(width / expectedWidth).toFixed(3)}, user-scalable=yes, maximum-scale=10, width=${expectedWidth}`,
             );
         });
 
@@ -571,6 +571,25 @@ test.describe('Viewport fixes', () => {
             const width = await page.evaluate('screen.width');
             const expectedWidth = width < 1280 ? 980 : 1280;
             const viewportValue = await page.evaluate(getViewportValue);
+            expect(viewportValue).toEqual(
+                `width=${expectedWidth}, initial-scale=${(width / expectedWidth).toFixed(3)}, user-scalable=yes, something-something`,
+            );
+        });
+
+        test('should override minimum-scale, if it is set', async ({ page }) => {
+            await gotoAndWait(
+                page,
+                '/blank.html',
+                {
+                    site: { enabledFeatures: ['webCompat'] },
+                    featureSettings: { webCompat: { viewportWidth: 'enabled' } },
+                    desktopModeEnabled: true,
+                },
+                'document.head.innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=2, user-scalable=no, minimum-scale=1, something-something">\'',
+            );
+            const width = await page.evaluate('screen.width');
+            const expectedWidth = width < 1280 ? 980 : 1280;
+            const viewportValue = await page.evaluate(getViewportValue);
             expect(viewportValue).toEqual(
                 `width=${expectedWidth}, initial-scale=${(width / expectedWidth).toFixed(3)}, user-scalable=yes, minimum-scale=0, something-something`,
             );
@@ -591,7 +610,7 @@ test.describe('Viewport fixes', () => {
             const expectedWidth = width < 1280 ? 980 : 1280;
             const viewportValue = await page.evaluate(getViewportValue);
             expect(viewportValue).toEqual(
-                `width=${expectedWidth}, initial-scale=${(width / expectedWidth).toFixed(3)}, user-scalable=yes, minimum-scale=0, something-something`,
+                `width=${expectedWidth}, initial-scale=${(width / expectedWidth).toFixed(3)}, user-scalable=yes, something-something`,
             );
         });
 
@@ -611,7 +630,7 @@ test.describe('Viewport fixes', () => {
             const expectedWidth = width < 1280 ? 980 : 1280;
             const viewportValue = await page.evaluate(getViewportValue);
             expect(viewportValue).toEqual(
-                `initial-scale=${(width / expectedWidth).toFixed(3)}, user-scalable=yes, maximum-scale=10, width=${expectedWidth}, minimum-scale=0, something-something`,
+                `initial-scale=${(width / expectedWidth).toFixed(3)}, user-scalable=yes, maximum-scale=10, width=${expectedWidth}, something-something`,
             );
         });
 
@@ -630,7 +649,7 @@ test.describe('Viewport fixes', () => {
             const expectedWidth = width < 1280 ? 980 : 1280;
             const viewportValue = await page.evaluate(getViewportValue);
             expect(viewportValue).toEqual(
-                `width=${expectedWidth}, initial-scale=${(width / expectedWidth).toFixed(3)}, user-scalable=yes, minimum-scale=0, something-something`,
+                `width=${expectedWidth}, initial-scale=${(width / expectedWidth).toFixed(3)}, user-scalable=yes, something-something`,
             );
         });
     });

injected/src/features/web-compat.js

@@ -719,8 +719,11 @@ export class WebCompat extends ContentFeature {
             // Race condition: depending on the loading state of the page, initial scale may or may not be respected, so the page may look zoomed-in after applying this hack.
             // Usually this is just an annoyance, but it may be a bigger issue if user-scalable=no is set, so we remove it too.
             forcedValues['user-scalable'] = 'yes';
-            // make sure you can zoom out to see the whole page. See https://app.asana.com/1/137249556945/project/1206777341262243/task/1207691440660873
-            forcedValues['minimum-scale'] = 0;
+            const minimumScalePart = parsedViewportContent.find(([key]) => key === 'minimum-scale');
+            if (minimumScalePart) {
+                // override minimum-scale to make sure you can zoom out to see the whole page. See https://app.asana.com/1/137249556945/project/1206777341262243/task/1207691440660873
+                forcedValues['minimum-scale'] = 0;
+            }
         } else {
             // mobile mode with a viewport tag
             // fix an edge case where WebView forces the wide viewport