pixi 6.2.0 blur filter artifacts near edge of window

[timetocode]

Hello!

I'm having an issue where the blur near the edge of the window is behaving inconsistently.  Anyone know how to fix this?

^The screenshot with the frowny face shows a bug where the black shadow doesn't reach the edge of the window. The black shadow does extend considerably past the edge of the window by the way, but this is just how it looks when I apply a blur filter. It is like the filter area is being cropped by the window but it needed some padding (setting the padding variable does not fix this, though, that's for something else.. this is more of a filter area issue I think..?).

^The screen shot with the happy face shows it working as desired! The shadow object reaches the edge of the window. The game sometimes looks like this, but not consistently.

 

Using blurFilter.autoFit = false; makes everything look perfect, so that's probably a hint as to what the issue is. HOWEVER when autoFit is false, the game sometimes crashes on loading and the console shows the following errors:

WebGL: INVALID_VALUE: texImage2D: width or height out of range

[.WebGL-0000100201D40700] GL_INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete: Attachment has zero size.

I would say if I keep refreshing the page I get a black screen and errors maybe 1/3 of the time  when using autoFit=false. The other 2/3s of the time everything looks great. So it is very unstable.

 

Anyone know how to fix??? Maybe something to do with getting the blur to exist in an area slightly bigger than the screen... or maybe a way to make it so autoFit doesn't result in frequent crashes?

More technical info:
Here is the black shadow object without the filter for reference. It is a PIXI.Mesh which forms the terrain for a game. The dirt is *another* mesh behind the shadow. The terrain is very very big, and is broken into chunks that are  32x32 tiles, each of which ix 8x8 pixels (rendered as quads in a mesh). So maybe that factors into the dimensions of the filter and explains a bit why I can keep running from left-to-right in the game and usually see the bug and sometimes not see the bug. The bug only occurs at the bottom and right edges of the window, and never occurs at the left edge of the screen. All of the shadow meshes are added to one container called "shadowMeshes" and the blur filter is being applied to that container (as opposed to being applied to each mesh individually).

Thanks for reading!

[timetocode]

Hmm I may have had a problem which was more due to Chrome zooming out. I've replaced the browser zoom with some in-game zoom logic and while some permutations of options still produce the artifact, most of the time everything works correctly.

The following settings have everything working for me:

no settings on the blur filter anymore

And then a container with the blur filter like this:
shadowLayer.filterArea = new Rectangle(0, 0, windowWidth, windowHeight)

And then the actual objects that I want blurred get added to that. Looks good so far! And the best part is no seams appear between the terrain chunks.