Question / Help BrowerSource awful performance with 'Blur' CSS filter

MasterEvilAce

New Member
I've been playing around with some ideas, but I've run into a snag.
I'm playing full-screened GIF files in a div with a strong BLUR css filter applied.
This works perfectly fine in latest Chrome and Edge browsers on Windows 10. it's very smooth. However, when loading the page in OBS's BrowerSource, the playback is extremely laggy. There is an inconsistent stutter when rendering the page.

The only way I've found to alleviate the slowdown is to set the BrowserSource's Width and Height to a lower value (say 1280x720 from 1920x1080.) I'm assuming this is because the blur filter has to essentially process half as many pixels.

What's the cause of this slowdown, compared to a native browser? Is the BrowserSource webkit implementation possibly running without hardware acceleration or something similar?

STEPS TO REPRODUCE:
An example HTML page can be found here: https://pastebin.com/emhBs9LW
Here are the lines in question that cause the issue. You can comment them out and load the page in OBS and see the difference in framerate.
-webkit-filter: blur(100px);
-moz-filter: blur(100px);
-o-filter: blur(100px);
-ms-filter: blur(100px);
filter: blur(100px);

You will want to load that page into a BrowserSource in OBS, with Width 1920 and Height 1080 @ 30 FPS.. Higher would probably make the issue more apparent.

Thanks for any help.
 
Top