Summary

When I put both a backdrop-filter and a filter on an element in ladybird using css, the backdrop one stops working.

Operating system

Linux

Steps to reproduce

1. Add a backdrop-filter and a regular filter to an element.
2. Observe that the backdrop one does not work.

Expected behavior

Both filters should have a visible effect.

Actual behavior

The element visually behaves as if it didn't have a backdrop-filter.

URL for a reduced test case

data:text/html,This should be very blurred.<div style="backdrop-filter: blur(8px);filter: blur(2px);position: absolute;top: 0;left: 0;width: 100%;height: 100%">This should be a little blurred and on top.</div>

HTML/SVG/etc. source for a reduced test case

<style>
  div {
    backdrop-filter: blur(8px);
    filter: blur(2px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

This should be very blurred.
<div>This should be a little blurred and on top.</div>

Log output and (if possible) backtrace

None

Screenshots or screen recordings

Ladybird:

Firefox:

Build flags or config settings

None

Contribute a patch?

• I’ll contribute a patch for this myself.