← Back to context

Comment by cmgriffing

16 days ago

Be careful using:

    dialog::backdrop {
        backdrop-filter: blur(2px);
    }

If there is frequently updating content on the page like a video, it can kill CPU performance. Restream does this and it punishes my M3 macbook air.

It seems you can use the transform3d trick to kick it to the GPU to help fix it.

I'd want to pause any video playing while a dialog with such a backdrop is open.

  • In the case of Restream (or cases like their "stage"), thats not always doable. What about superfluous hero animations that marketing sites love to do these days? Pausing some generic canvas rendering logic is usually more annoying than you would want.