Weird issue with canvas sometimes appearing squished at the top of the <div>

[malloryrsteffes]

Hi Sirxemic! Thanks for making this plugin, it's awesome.

I'm having a weird issue that occurs only sometimes - the ripple effect works correctly and the site looks great. However, sometimes (and only sometimes) when I refresh, the canvas seems to resize and appear as very distorted and squished at the top of the

I have set to ripple. I attached a screenshot. Each div is styled and targeted the exact same way. Any ideas?

[sirxemic]

Can't figure out what's going on just by looking at the screenshot, unfortunately. If you could give me more information (e.g. what does the DOM look like and how are the elements styled) I might be able to help. If that's still necessary of course, since it's more than a month later now.

[artsybytes]

This happened to me too. The canvas of the errant element showed a height much shorter than the image. It was only happening to the second element further down the page that I applied the ripple effect to (I have only two page elements with the ripple effect). The way I fixed it is by applying the code below. I resizes the element as it comes into view when you scroll the page.

function elementInView(elem) {
            return $(window).scrollTop() < $(elem).offset().top + $(elem).height();
        }

        $(window).scroll(function () {
            if (elementInView($('.ripple2')))
                $('.ripple2').ripples('updateSize');
        });