www.icbtechscr.com - design is broken

[webcompat-bot]

URL: https://www.icbtechscr.com/?term=routers&s=&post_type=product&taxonomy=product_cat

Browser / Version: Firefox Mobile 104.0 Operating System: Android 12 Tested Another Browser: Yes Edge

Problem type: Design is broken Description: Images not loaded Steps to Reproduce: Any search that yields results will display broken images.

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20220816115024
• channel: release
• 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-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue. I've created a Bugzilla issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1788031

Closing as Moved.

[qa_35/2022]

[wisniewskit]

It turns out that this isn't related to ETP or even a Firefox bug. The site is actually just mis-matching their "on page loaded" events, so there is a race condition in when their carousel's code is ready, and when they try to use it.

I see this in the web console:

Uncaught TypeError: can't access property "end", $.support.transition is undefined

That variable is defined in this way in a transitions.min.js script:

$(function() {
        $.support.transition = function() {

But they are waiting for the code to load this way in the script which throws the error:

$(window).on('load', function () {
    $('[data-ride="vc_carousel"]').each(function () {
      var $carousel = $(this);
      $carousel.carousel($carousel.data())
    })
  })

But jQuery's ready function waits for either window.load or DOMContentLoaded to fire, and if it so happens that both pieces of code end up firing on window.load, then this race condition can occur, since there will be no guarantee of which code runs first.

Changing to use $(function() { in both places fixes the bug:

$(function () {
    $('[data-ride="vc_carousel"]').each(function () {
      var $carousel = $(this);
      $carousel.carousel($carousel.data())
    })
  })

This is likely causing breakage on other browsers as well, depending on network conditions and general luck, so they should fix this.

[webcompat-bot]

Generate outreach template