Doesn't seem to work

[jonaswannfors]

I get no errors in console but no action from the plugin either. At http://cinemafrica.se/ I have added the class "target" to the fixed header, and added it when I initialize the script right before : document.addEventListener('DOMContentLoaded', function () { BackgroundCheck.init({ targets: '.target', }); });

Is there a way to know if it is working other than watching the element for added classes? Any suggestions how to solve this?

[jonaswannfors]

After a lot of debbugging I found out that responsive images (picture, srcset) are the cause of this. I managed to fix it by changing the drawImage function to:

` function drawImage(image) { var area = getArea(image);

image = image.nodeType ? image : image.img;

if (area.imageWidth > 0 && area.imageHeight > 0 && area.width > 0 && area.height > 0) {
    /*context.drawImage(image,
                    area.imageLeft, area.imageTop, area.imageWidth, area.imageHeight,
                    area.left, area.top, area.width, area.height);*/
    //Fix for srcset images
    context.drawImage(image,
        area.left, area.top, area.width, area.height);
} else {
  log('Skipping image - ' + image.src + ' - area too small');
}

}`

[jonaswannfors]

Make sure picture element is display: block as well to make it work, and add class to img inside it.