www.walmart.com - Product thumbnails are squeezed

[softvision-oana-arbuzov]

URL: https://www.walmart.com/browse/clothing/sneakers-athletic/5438_1045804_1045806_9160743

Browser / Version: Firefox Preview Nightly 191205 (🦎: 72.0a1-20191202091209) Operating System: Huawei MediaPad T5 (Android 8.0.0) - 1920 x 1200 pixels, 16:10 ratio (~224 ppi density) Tested Another Browser: Yes Chrome

Problem type: Something else Description: Product thumbnails are squeezed

Steps to Reproduce:

1. Navigate to https://www.walmart.com/browse/clothing/sneakers-athletic/5438_1045804_1045806_9160743
2. Observe product thumbnails.

Expected result: Thumbnails are displayed in full size.

Actual result: Thumbnails are squeezed.

Notes:

1. Not reproducible on Chrome 78.0.3904.90 and Firefox Nightly 73.0a1 (2019-12-08).
2. Only reproducible on Tablet layout.
3. Screenshot attached.

Affected area:

<img data-pnodetype="item-pimg" data-image-indicator="0" alt="DANSKIN Women's Positive Lace Up Sneakers" data-image-src="https://i5.walmartimages.com/asr/5700fa7a-0f54-45a4-8618-2179f6292662_1.da50143afddc0b6d5c323b3a1d532a53.jpeg?odnWidth=282&amp;odnHeight=376&amp;odnBg=ffffff" src="https://i5.walmartimages.com/asr/5700fa7a-0f54-45a4-8618-2179f6292662_1.da50143afddc0b6d5c323b3a1d532a53.jpeg?odnWidth=282&amp;odnHeight=376&amp;odnBg=ffffff">

Browser Configuration

• None

From webcompat.com with ❤️

[karlcow]

hmm the page on the screenschot for Firefox Preview Nightly is not fully loaded. It has also a different layout. on RDM, I can't reproduce, could you test again @softvision-oana-arbuzov

[softvision-oana-arbuzov]

@karlcow I can still reproduce the issue. For me the page is fully loaded, it is only reproducible on tablet and device must be in "Landscape" mode, on Firefox Preview Nightly.

[karlcow]

In their main page they get this script.

<script>
(function() {
  /**
   * Parses the document.cookie string and retrieves the value of cookieName
   *
   * @param {string} name of the cookie
   * @returns {string} value of the cookie
   *
   * The regex pattern: beginning of the string or semicolon or whitespace, followed by escaped special-chars'
   * cookie name, followed by non-semicolon cookie value(can be empty)
   *
   * TODO: unit test this function
   * Test case:
   * document.cookie = "x-csrf-jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0eXBlIjoiY29va2llIiwidXVpZCI6IjhjYTc4NzAwLWE1NDMtMTFlNi1iYjBiLTY1N2U0YzQ0ZjEwYyIsImlhdCI6MTQ3ODU2MjAyMiwiZXhwIjoxNDc4NTYzMjIyfQ.Tymc79QWr7J7u0PZI4HL5CXuuKceqQGCx-s4327nL7g; SEARCH_DEVICE_TYPE=MOBILE"
   * getCookie("SEARCH_DEVICE_TYPE") ==> "MOBILE"
   */
  function getCookie(cookieName) {
    if (!cookieName) {
      return "";
    }
    var regex = new RegExp(
      "(?:^|;\\s*)" + ("" + cookieName).replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") + "=([^;]*)"
    );
    var match = regex.exec(document.cookie);
    if (!match || match.length < 2) {
      return "";
    }
    return match[1];
  }

  /**
   * Retrieves the user agent string
   */
  function getUA() {
    var userAgent = window && window.navigator && window.navigator.userAgent;
    return userAgent || "";
  }

  /**
   * "SEARCH_DEVICE_TYPE": custom cookie we set when the device is mobile
   * ref: https://gecgithub01.walmart.com/redux/search-components/pull/126
   */
  var SEARCH_DEVICE_TYPE = "SEARCH_DEVICE_TYPE";
  var MOBILE = "MOBILE";
  var element = document.querySelector("meta[name=viewport]");

  if (getCookie(SEARCH_DEVICE_TYPE) === MOBILE) {
    if (element !== null) {
      element.setAttribute(
        "content",
        "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
      );
    }
  } else {
    /**
     * The logic behind this script is that we want to set the page viewport of Android tablet device with
     * lower than 1024 width resolution to 1024 so that it resets UI rendering to fit the screen
     * The server first checks whether the device type coming from this request is MOBILE, if yes, the resetting logic
     * will not run; otherwise, we further confirm by checking the user agent to see whether it's an android tablet

     * TODO: unit test this regex
     * var regex = /iPad|(.*Android)(.*Chrome\/[.0-9]* )(?!Mobile)/ig;
     *
     * Test cases:
     * negative case (Android mobile phone user agent string):
     * var userAgent = "Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.23 Mobile Safari/537.36"
     * userAgent.match(regex) ==> null;
     *
     * positive case (Android tablet user agent string):
     * var userAgent = "Mozilla/5.0 (Linux; Android 4.3; Nexus 7 Build/JSS15Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2725.0 Safari/537.36"
     * userAgent.match(regex) ==> ["Mozilla/5.0 (Linux; Android 4.3; Nexus 7 Build/JSS15Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2725.0 "]
     */

    if (
      getUA().match(/iPad|(.*Android)(.*Chrome\/[.0-9]* )(?!Mobile)/gi) !== null && element !== null
    ) {
      element.setAttribute("content", "width=1024");
    }
  }
})();
</script>

@softvision-oana-arbuzov what is the User Agent string of this Huawei MediaPad T5 (Android 8.0.0)?

Also does it happen with the latest Nightly?

Also the screenshot seems to be a lot smaller than 1900x1200. Do you have a different resolution at the android level?

[softvision-oana-arbuzov]

@karlcow, the tablet Huawei MediaPad T5 (Android 8.0.0) UA is: Mozilla/5.0 (Android 8.0.0; Mobile; rv:74.0) Gecko/74.0 Firefox/74.0

The issue is still reproducible with latest Firefox Preview Nightly 200116 (🦎: 74.0a1-20200115093807).

Device screen resolution is: 1920x1200.

[karlcow]

ok found!

The issue is happening because this time of the UA string have a minor version

• BAD: Mozilla/5.0 (Android 8.0; Mobile; rv:74.0) Gecko/74.0 Firefox/74.0
• OK:  Mozilla/5.0 (Android 8; Mobile; rv:74.0) Gecko/74.0 Firefox/74.0

Basically the opposite of #47242

[softvision-oana-arbuzov]

The layout has changed, and the products are not squeezed.

Tested with: Browser / Version: Firefox Nightly 98.0a1 (🦎 98.0a1-20220111093827) Operating System: Huawei MediaPad T5 (Android 8.0.0) - 1920 x 1200 pixels, 16:10 ratio (~224 ppi density)

Closing the issue.