CODEWITHSUNDEEP
javascriptjqueryproduction-environment
Steven Grant
Steven Grant

Reputation: 1325

weird JS error on mobile/tablet browsers in production

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?

Upvotes: 0

Views: 246

Answers (2)

blex
blex

Reputation: 25659

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!

Upvotes: 1

Ohgodwhy
Ohgodwhy

Reputation: 50798

The only thing I can see that becomes problematic is there's a call to an image that should be loaded at a certain screen size. You can see that the value returned by whatever performs the comparison is obviously returning incorrectly:

background-image: url(http://www.thegospelcoalition.org/undefined);

Fix that and you should be good. (Not respecting other erroneous errors)

Upvotes: 0

Related Questions