[csswg-drafts] [filter-effects] `drop-shadow()` combined with `transform` has interop issues (#12546)

Psychpsyo has just created a new issue for https://github.com/w3c/csswg-drafts:

== [filter-effects] `drop-shadow()` combined with `transform` has interop issues ==
Consider the following:
```html
<!DOCTYPE html>
<style>
  #outer {
    background-color: red;
    width: 100px;
  }
  #inner {
    height: 100px;
    width: 90px;
    background: green;
    filter: drop-shadow(10px 0 green);
    transform: scaleX(-1);
  }
</style>
<div id="outer"><div id="inner"></div></div>
```
Does the drop-shadow go left or right? (i.e. is it mirrored by the transform?)
Chrome and Firefox disagree on this. The above is a green square in Firefox, but in Chrome, it has a red bar on the right. (since the drop-shadow goes left, so it's not covering `#outer`)

I cannot find any definitive answer for what should happen in this case in the spec so I'm opening this.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12546 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 30 July 2025 16:44:38 UTC