How to improve FF performance when working with css blur?

Question

css

Hello. There is such a design - https://codepen.io/anon/pen/zemvWO
In short - two, videoone is stretched as a background, the other is in a container and with . There is a collective farm personnel counter. When simply playing a blurry video . The container has a resize, during which , which is no longer acceptable. Because of this, the video is wildly out of sync and visually unpleasant. Setting "Use hardware acceleration whenever possible" in firefox doesn't change anything. On ubuntu in firefox fps is generally less than 10 during resizing. In chrome, the FPS is stable at 59 with any manipulation of the container or video.filter: blur(10px)
avg FPS - 59, min 55avg FPS - 40, min 35
I'm not really into engines, so the question is - why is firefox so slow in this design, even with a blur of one pixel? Is it possible to somehow improve performance, even in a specific browser?

Answer 1

No matter how hard you try, you will not be able to fully synchronize 2 videos even without blur.
Try using webgl.
Just don't blur through post processing. It will be too expensive.
Blur directly in the shader when drawing the output rectangle in one pass. So we get a loss in the number of samples from the texture, but it will still be cheaper than doing a 2-pass post-processing.

Answer 2

Here you take all your code with an idea with two videos and throw it in the trash. To implement all your plans, you only need 1 video, hidden and 2 canvases. The video plays itself, draw it on canvases, blur one of them as you like, even with the blur property, even with canvas tools. The result will be two canvases, on which frames from the video are synchronously drawn, and one will be blurred.
And if you transfer a video image to a shader and draw everything there, then the performance will be cosmic.