Displacement Filter causing Sprite Jump

[seagull]

I'm having trouble replicating this, but on some machines (OS X), in Firefox (latest), the mouseover interaction (see codepen) is causing the stage (the image grid) to jump a few pixels. Any insights as to why this is happening? Should I not be handling filters in the manner that I am?

For reference the Filter Animation Code starts on line 147.

https://codepen.io/elegantseagulls/pen/BMJjRr?editors=1010

What I'm doing, in short, is on mouseover reposition filter sprite to current mouse position, then I'm animating by changing the scale value of the filter and the sprite.

Any idea what could be causing this jump?
 

const tl = new TimelineMax()
  tl
    .set(filter.scale, { x: 0, y: 0 })
    .add('sync')
    .fromTo(ripple.scale, 1,{ x: .1, y: .1 }, { x: .74, y: .74 }, 'sync')
    .fromTo(filter.scale, 1, { x: 50, y: 50 },{ x: 0, y: 0 }, 'sync')

 

[ivan.popelyshev]

Put a gray 0x808080 edge around your displacement texture to avoid CLAMPing in texture filtering. This displacement is applied over ALL THE SCREEN, but displacement itself is small sprite, and it has non-gray pixel on edge => when displacement shader takes pixel far away in the left - this edge pixel will be taken as example. WebGL stuff. Read WebGL articles to know how it works.

Alternative: use pixi-picture backdrop thingy, apply filter only to background: 

https://github.com/pixijs/pixi-picture/tree/master/src

https://gameofbombs.github.io/examples-heaven/#/picture/displacement-backdrop.js

Works only with v4, but it seems that you dont use v5 yet