Weird image glitch. p5.geolocation & CSS

p5.js Libraries
1

I am using the p5.geolocation library to measure the distance between the app user and a trigger point location. As the user moves closer to the trigger point the blur effect on an image is adjusted, the closer they are the more in focus the image is. The image blur is controlled by adjusting the CSS blur filter through javascript. I have already tried the p5 blur filter and the rendering is too slow for mobile. I am getting a strange glitch in the image, see the photo below. As the image blur changes there are lines appearing across the image. Does anyone have an idea what is causing it?

Image_glitch
Image_glitch.png713×713 223 KB

2

Can I ask you to provide enough code for me to reproduce the bug?

3 
//Create a geoFenceCircle 
fence = new geoFenceCircle(triggerPoint.latitude, triggerPoint.longitude, 0.009, watchOptions);

//Use the distance from the geoFenceCircle to map the blur.
blurFactor = map(fence.distance,0,0.12,0,40,true);

//Select the image and adjust the blur filter.
var gameImage = document.querySelector(".game-image");
  gameImage.style.filter = "blur(" + blurFactor + "px)";
4

You can decouple your location events from the blurring so to isolate the glitch effect and to reproduce it more easily. You could use the mouse event and the map function to simulate the factors that drive the blurring effect. Notice is important to provide full code for this type of issues as well as browser version and OS.

Did you try any other browsers by any chance? Do you see the problem there as well?

Kf