weird JS error on mobile/tablet browsers in production

Question

This project has a lot of junk JS that we've inherited from the previous devs.

We've recently had images stop appearing on http://www.thegospelcoalition.org on tablet and mobile.

As you can see, images are fine in desktop. Pull it up on a device or in Chrome dev tools emulator and you can see the issue.

We're working fine in development, images appear as expected.

We've cleared CloudFlare cache but still no joy.

It's problematic to troubleshoot because locally, the team is fine.

Any pointers?

Answer 1

In js/aggregate-ck.js, you have this function that gets the img src and sets it as a background-image:

_transferImages = function(selector){
    var $selector=$(selector);
    $selector=$selector.not($_transferredImages);
    $selector.each(function(){
        var $this=$(this),
        $img=$this.children("img"),
        $img1;
        if($img.length){
            $img1=$img.eq(0);
            $this.css({"background-image":"url('"+ $img1.attr("src")+"')"});
            $img1.remove();
        }
    });
    $_transferredImages=$_transferredImages.add($selector);
    return $selector;
};

When I use a desktop user agent, it works fine because the images have an src attribute. Unfortunately, with a mobile user agent, these images do not have an src, but a data-cfsrc attribute.

To correct this function, replace

$img1.attr("src")

with

($img1.attr("src") || $img1.attr("data-cfsrc"))

and you're good to go!