Backdrop-filter property in CSS leads to Choppiness in Streaming Video

In Why Video Choppiness Happens? A layman’s guide to ensure your your videos run smoothly in digital age, I shared why video choppiness happened at the source level. In this article, I will share an example of a CSS property setting that results in video choppiness.

In a recent project, my team encountered a video choppiness issue that seems unsolvable.

Symptoms: Videos on Apple M1 Machines all played back fine, but on some Intel Machines, choppiness persists even after turning off “Hardware acceleration” option on Chrome. And the choppiness is not always there, only happened to handful of machines.

After digging deeper into code, we pinpointed backdrop-filter: blur(Xpx), property (while X is an integer value) in CSS to embed videos might be the root cause that creates video choppiness due to several reasons related to performance and rendering issues. Let’s break down these reasons step by step:

1. Performance Overhead

The `backdrop-filter` property applies filter effects to the background of an element, which can be computationally intensive. When you use `blur(Xpx)`, the browser needs to continuously apply the blur effect to the video content behind the element. This process involves:

• Real-time Processing: The browser must process each frame of the video to apply the blur effect, which can be demanding on the CPU and GPU.
• High Frame Rate: Videos typically run at 30 or 60 fps, meaning the blur effect must be recalculated and rendered multiple times per second.

This continuous processing can lead to performance degradation, especially on devices with limited processing power, resulting in video choppiness.

2. Rendering Issues in Browsers

Different browsers handle the `backdrop-filter` property with varying levels of efficiency. For instance, there have been reports of rendering glitches and flickering issues in Chrome when using `backdrop-filter: blur`:

• Chrome Bugs: Users have reported issues such as flickering and glitching when hovering over elements or interacting with the page. These issues are often related to how Chrome handles the rendering of the `backdrop-filter` property.
• Browser Compatibility: Not all browsers support `backdrop-filter` equally well. While modern browsers like Chrome, Firefox, and Safari have support, the performance can vary, and some older versions may not support it at all.

3. GPU and CPU Utilization

Applying a blur effect to a video backdrop can significantly increase GPU and CPU utilization:

• GPU Rendering: The `backdrop-filter` property can force the browser to use GPU rendering to handle the effect. While this can offload some work from the CPU, it can also lead to higher GPU usage, which might not be optimal for all devices.
• CPU Bottleneck: On devices without a powerful GPU, the CPU might struggle to keep up with the demands of real-time video processing and applying the blur effect, leading to choppiness and lag.

4. Workarounds and Alternatives

To mitigate these issues, consider the following alternatives:

• Lower Blur Radius: Reducing the blur radius can decrease the computational load. For example, using `blur(5px)` instead of `blur(15px)` might provide a balance between visual effect and performance.
• Static Backgrounds: If possible, use a static image with a blur effect instead of a video. This eliminates the need for real-time processing.
• CSS Optimizations: Use CSS properties like `transform: translate3d(0,0,0);` to force GPU rendering, which can sometimes improve performance.

Conclusion

Using `backdrop-filter: blur(Xpx)` to embed videos can create video choppiness due to the high computational demands of real-time processing, rendering issues in browsers, and increased GPU and CPU utilization. To avoid these issues, consider optimizing the blur effect, using static backgrounds, or applying CSS optimizations.