Jitter on iOS / Safari

[MicahBCode]

When using my Iphone X with latest iOS version I'm getting a jitter like this:

My code looks like that: ` This:

const element = $('.Intro__Logo');
element.ripples({
    resolution: 2400,
    perturbance: 0.04,
    interactive: true,
});
var counter = 1;
const x_min = element.outerWidth() / 5 * 2;
const x_max = element.outerWidth() / 5 * 3;
const y_min = element.outerHeight() / 3;
const y_max = element.outerHeight() / 3 * 2;
var x = Math.random() * (x_max - x_min) + x_min;
var y = Math.random() * (y_max - y_min) + y_min;
element.ripples('drop', x, y, 50, 0.04);
var drops = setInterval(function() {
    counter++;
    x = Math.random() * (x_max - x_min) + x_min;
    y = Math.random() * (y_max - y_min) + y_min;
    element.ripples('drop', x, y, 70, 0.03);
    if(counter >= 3) {
        clearInterval(drops);
    }
}, 3000);

`

Is this a (known) issue or have i missed something?

[sirxemic]

Try setting the resolution to 2048. Sometimes mobile devices don't like it when render textures have sizes that are no powers of 2.

[MicahBCode]

That doesn't solve it for me unfortuntely. Might it be a problem, that I have a transparent image over laying over the image i'm animating? I mean using position absolute I layed the paint can over the animated logo. (see pictures above)

[MicahBCode]

It seems that using a higher resolution for the effect ends up in getting those effects due to the size of the created canvas. Somehow the resolution of the canvas is very unsharp in my case on Safari/iOS. Is there a possibility to fix this issue or is it possible to change the speed of the effect in another way?

[MicahBCode]

And is it possible to disable reflections at the border of the image?

[sirxemic]

Did a small investigation and can tell you 2 things:

• on mobile you'll always get a little bit of "jitter". It's either that or no distortion effects at all. The jitter will be pretty subtle as long as the resolution and drop strength aren't set to " too large" values. Using values for both like in the demo should work decently. Alternatively you can set the background image to null, which will only apply the specular highlight if even the most subtle jitter is bothering you.
• The only practical use of using values larger than 1000 for the resolution is if you have a large surface you want to apply the effect on. What I've done a poor job on is documenting how resolution exactly affects the effect. Basically: a drop effect propagates a fixed distance per frame, so if your resolution is 2048, it will take about 100 seconds for a drop on the left to reach the right side (or less on 144Hz monitors - a use case I've never taken into account). Since you're dealing with a small image and a can of paint, I can imagine a value of 128 should work fine.

Furthermore, I feel like disabling reflections at certain locations is outside of the scope of this plugin. You could try playing with https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path to clip the effect using CSS.

[MicahBCode]

Ah thanks for the anser. The reason I use this high values is because it should simulate a paint bucket. So the animation should be slower what I reached with setting a higher resolution to the effect. Is there another possible way to change the speed of the animation?