www.indiapost.gov.in - Design is broken

[webcompat-bot]

URL: https://www.indiapost.gov.in/MBE/Pages/Content/EMS-SpeedPost.aspx

Browser / Version: Firefox Mobile 65.0 Operating System: Android Tested Another Browser: No

Problem type: Design is broken Description: cant horizontal scroll text Steps to Reproduce:

Browser Configuration

• mixed active content blocked: false
• image.mem.shared: true
• buildID: 20190216063339
• tracking content blocked: false
• gfx.webrender.blob-images: true
• hasTouchScreen: true
• mixed passive content blocked: false
• gfx.webrender.enabled: false
• gfx.webrender.all: false
• channel: default

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue. On Firefox the layout is broken and on Chrome it is correctly displayed, without elements overlapped and with horizontal scrolling posibility.

Tested with: Browser / Version: Firefox Nightly 67.0a1 (2019-03-06) Operating System: LG G5 (Android 7.0) - 1440 x 2560 pixels (~554 ppi pixel density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

Moving to Needsdiagnosis for further investigation.

[karlcow]

Chrome gets a

body {
width:1354px !important;
}

that firefox doesn't get. This is set in

<link rel="stylesheet" type="text/css" href="/_layouts/15/DOP.Portal.UILayer/styles/deskview.css">

which is set by

  $(document).ready(function() {
    if ($("#ctl00_UCLogin1_hdnIsMobileSite").val() == "true") {
      if (
        window.location.href
          .toLowerCase()
          .match("/vas/pages/indiaposthome.aspx") ||
        window.location.href
          .toLowerCase()
          .match("/vashindi/pages/indiaposthome.aspx") ||
        window.location.href
          .toLowerCase()
          .match("/_layouts/15/dop.portal.tracking/trackconsignment.aspx") ||
        window.location.href
          .toLowerCase()
          .match("/vas/pages/trackconsignment.aspx") ||
        window.location.href
          .toLowerCase()
          .match("/vas/pages/trackcomplaintstatus.aspx") ||
        window.location.href
          .toLowerCase()
          .match("/vas/pages/findpincode.aspx") ||
        window.location.href
          .toLowerCase()
          .match("/vas/pages/locatepostoffices.aspx") ||
        window.location.href
          .toLowerCase()
          .match("/vas/pages/compareservices.aspx") ||
        window.location.href
          .toLowerCase()
          .match("/vas/pages/clickandbook.aspx") ||
        window.location.href
          .toLowerCase()
          .match("/vashindi/pages/clickandbook.aspx") ||
        window.location.href
          .toLowerCase()
          .match("/vas/pages/calculatepostage.aspx") ||
        window.location.href
          .toLowerCase()
          .match("/vashindi/pages/trackcomplaintstatus.aspx") ||
        window.location.href
          .toLowerCase()
          .match("/vashindi/pages/findpincode.aspx") ||
        window.location.href
          .toLowerCase()
          .match("/vashindi/pages/locatepostoffices.aspx") ||
        window.location.href
          .toLowerCase()
          .match("/vashindi/pages/compareservices.aspx") ||
        window.location.href
          .toLowerCase()
          .match("/vashindi/pages/calculatepostage.aspx")
      ) {
        var slidemenu = document.getElementById("slide-menu");
        slidemenu.style.top = "10px";
        slidemenu.style.position = "fixed";
        slidemenu.style.paddingLeft = "0px";
        slidemenu.style.left = "15px";
        $($("#slide-menu_multilevelpushmenu > div.levelHolderClass")[0]).css(
          "margin-top",
          "0px"
        );
      } else {
        var deskview = document.createElement("link");
        deskview.setAttribute("rel", "stylesheet");
        deskview.setAttribute("type", "text/css");
        deskview.setAttribute(
          "href",
          "/_layouts/15/DOP.Portal.UILayer/styles/deskview.css"
        );
        document.getElementsByTagName("head")[0].appendChild(deskview);
        var slidemenu = document.getElementById("slide-menu");
        slidemenu.style.top = "124px";
        slidemenu.style.paddingLeft = "21px";
      }
      if (
        window.location.href
          .toLowerCase()
          .match("/vas/pages/indiaposthome.aspx") ||
        window.location.href
          .toLowerCase()
          .match("/vashindi/pages/indiaposthome.aspx")
      ) {
        $("#telephone").prop(
          "href",
          "tel:" +
            $("#telephone")
              .children("strong")
              .text()
        );
      }
    }
  });

The document.ready doesn't seem to be executed at all.

Ah!

Firefox

<input type="hidden" name="ctl00$UCLogin1$hdnIsMobileSite" id="ctl00_UCLogin1_hdnIsMobileSite" value="false">

Chrome

<input type="hidden" name="ctl00$UCLogin1$hdnIsMobileSite" id="ctl00_UCLogin1_hdnIsMobileSite" value="true">

this is happening server side.

PS: There is a line in the code with

      });
n</script>

it has no impact on the rendering as far as I know, but it's not very clean.

[softvision-oana-arbuzov]

The issue is still reproducible on my side.

Tested with: Browser / Version: Firefox Nightly 68.3a1 (2019-11-12), Firefox Preview Nightly 191109 (🦎: 72.0a1-20191105095755) Operating System: Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels, 19:9 ratio (~432 ppi density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

[softvision-oana-arbuzov]

This is still an issue.

Tested with: Browser / Version: Firefox Nightly 106.0a1 (🦎106.0a1-20220914154803) Operating System: Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density) VPN active pointing to India

[inv_38/2022]