www.espressoparts.com - items are not rendered as expected

[webcompat-bot]

URL: https://www.espressoparts.com/

Browser / Version: Firefox Mobile 86.0
Operating System: Android 10
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Images not loaded
Steps to Reproduce:
No images in Firefox, site rendered correctly in chrome

View the screenshot

Browser Configuration

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

View console log messages

From webcompat.com with ❤️

[softvision-raul-bucata]

We appreciate your report. I was able to reproduce the issue. The site is not rendered as expected.

Tested with:
Browser / Version: Firefox Nightly 210221 (🦎87.0a1-20210218092411🦎)/ Chrome Mobile Version 88.0.4324.181
Operating System: OnePlus 6 (Android 10) - 2280 ×1080 pixels, 19:9 ratio (~402 ppi density)

Notes:

1. Loads as expected using Chrome
2. Reproducible regardless of the status of ETP.

Moving this to NeedsDiagnosis for further investigations.

[karlcow]

I can't reproduce on RDM. Let's see on the device ah yes I can reproduce there strange.

This is the markup when the image is received.

<div
  class="slideshow__slide-inner slideshow__slide-inner--middle-center image--fade-in lazyloaded"
  data-bgset="//cdn.shopify.com/s/files/1/0511/8282/9755/files/Mobile_800_x_720-01_600x720_crop_center.png?v=1612557187 [--phone] | //cdn.shopify.com/s/files/1/0511/8282/9755/files/Free-Ship-banner_1_800x.png?v=1612409819 800w, //cdn.shopify.com/s/files/1/0511/8282/9755/files/Free-Ship-banner_1_1000x.png?v=1612409819 1000w, //cdn.shopify.com/s/files/1/0511/8282/9755/files/Free-Ship-banner_1_1200x.png?v=1612409819 1200w, //cdn.shopify.com/s/files/1/0511/8282/9755/files/Free-Ship-banner_1_1400x.png?v=1612409819 1400w, //cdn.shopify.com/s/files/1/0511/8282/9755/files/Free-Ship-banner_1_1600x.png?v=1612409819 1600w, //cdn.shopify.com/s/files/1/0511/8282/9755/files/Free-Ship-banner_1_1800x.png?v=1612409819 1800w"
  data-optimumx="1.4"
  style="
    background-image: url('https://cdn.shopify.com/s/files/1/0511/8282/9755/files/Mobile_800_x_720-01_600x720_crop_center.png?v=1612557187');
  "
>
  <picture style="display: none"
    ><source
      data-srcset="//cdn.shopify.com/s/files/1/0511/8282/9755/files/Mobile_800_x_720-01_600x720_crop_center.png?v=1612557187"
      media="(max-width: 640px)"
      sizes="411px"
      srcset="
        //cdn.shopify.com/s/files/1/0511/8282/9755/files/Mobile_800_x_720-01_600x720_crop_center.png?v=1612557187
      " />
    <source
      data-srcset="//cdn.shopify.com/s/files/1/0511/8282/9755/files/Free-Ship-banner_1_800x.png?v=1612409819 800w"
      sizes="411px"
      srcset="
        //cdn.shopify.com/s/files/1/0511/8282/9755/files/Free-Ship-banner_1_800x.png?v=1612409819 800w
      " />
    <img
      alt=""
      class="lazyautosizes lazyloaded ls-is-cached"
      data-sizes="auto"
      data-optimumx="1.4"
      data-parent-fit="cover"
      data-srcset=""
      sizes="411px"
  /></picture>
</div>

The important part is the background-image: url('https://cdn.shopify.com/s/files/1/0511/8282/9755/files/Mobile_800_x_720-01_600x720_crop_center.png?v=1612557187');

This part is not happening for Firefox on Android.

        h = function (e) {
          if (e.target._lazybgset) {
            var t = e.target,
            n = t._lazybgset,
            s = t.currentSrc || t.src;
            if (s) {
              var o = i.fire(n, 'bgsetproxy', {
                src: s,
                useSrc: l.test(s) ? JSON.stringify(s) : s
              });
              o.defaultPrevented || (n.style.backgroundImage = 'url(' + o.detail.useSrc + ')')
            }
            t._lazybgsetLoading && (i.fire(n, '_lazyloaded', {
            }, !1, !0), delete t._lazybgsetLoading)
          }
        };

but I can't manage to have the debugger to break for now.

[karlcow]

I just noticed also the shopify library had an issue too with the code
in https://cdn.shopify.com/s/files/1/0511/8282/9755/t/2/assets/theme.min.js?v=8761152545080816109

if (
  !(
    navigator.connection &&
    (navigator.connection.saveData ||
      navigator.connection.effectiveType.includes("2g"))
  )
) {
  if ("viewport" == tt) {
    if (
      document.documentElement.clientWidth *
        document.documentElement.clientHeight <
      450000
    ) {
      /** @type {boolean} */
      et = true;
    }
  } else {
    if ("viewport-all" == tt) {
      /** @type {boolean} */
      et = true;
    }
  }
}

This will fail navigator.connection.effectiveType.includes("2g"))
and mozilla/standards-positions#117 (comment)
Eventually Mozilla webcompat team could shim it at least that it would not fail. It could return true or False, but right now it's a hard fail. ( @wisniewskit what do you think?)

But that still doesn't my issue with images. Because it fails identically on desktop rdm with mobile UA, but images are being displayed.

[wisniewskit]

In this situation, the script will stop running and jump to any catch handler around this code, if one is present. In this case there is unlikely to be a catch, since the error is being displayed to us in the console rather than being "caught". That means that the rest of the script is likely not being run, so if something past this code (or in the if-statement) is needed to make the site render things properly, it's almost certainly the cause of the failure.

Since the issue doesn't seem to be reproducible in the RDM, that leaves us without DitM to be able to easily test this. It might be possible to use Tinker Tester Developer Spy, using its console API (although though I have not used that for a while, so the documentation may even be out of date), or a proxy like Charles to redirect to a local copy of the script served from another server.

Aside from that, we usually have one further option: creating our own local build of Android Firefox (an artifact build is usually fine), with a test intervention in the webcompat addon, and see if the problem goes away on that build.

I will take a closer look to see what what ends up being useful here.

[karlcow]

Hey @lmandel,

This is an issue with Shopify theming JS. We are not fully sure yet if it will solve the issue for this site, but at least it's definitely an error that have consequences for this piece of code.

Do you know who we should contact at @Shopify
https://github.com/orgs/Shopify/people

Thanks.

[karlcow]

Ah @lmandel Mozilla might be able to fix it on Firefox side.
See https://bugzilla.mozilla.org/show_bug.cgi?id=1637922

Currently Safari is failing gracefully because navigator.connection is not defined.
and Firefox Desktop with RDM and mobile UA is working too because navigator.connection is not defined.

But on Firefox Android, the browser is sending a half defined navigator.connection which is tripping up the code.

View the screenshot

[karlcow]

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1637922

[karlcow]

As yet another confirmation that it was the issue.
On RDM with mobile UA.
setting in about:config to dom.netinfo.enabled to true reproduces the issue we see on firefox android.