Does CSS mix-blend-mode work with transform?

Question

Apparently mix-blend-mode doesn't play nice with transform: translate() and z-index. Applying any of these to some text element will immediately cancel the mix-blend-mode affect.

Questions

Is this a known limitation?
Is there a CSS-based workaround?

I know I can use JavaScript to mimic the transform: translate() functionality, but this isn't really ideal.

I'm seeing the same thing in Chrome and not in Firefox. – Justin McCandless Jan 24 '17 at 20:33 — Justin McCandless, Jan 24 '17 at 20:33
Still having issues in chrome but not firefox – Evan Jul 13 '21 at 20:30 — Evan, Jul 13 '21 at 20:30

score 1 · Answer 1 · answered Mar 14 '22 at 15:50

1

I faced the same issue and the workaround I found was replacing transform: translate() by position:absolute, margin-top:<y>px and margin-left:<x>px.

NB: Negative margins are valid so it still works with negative x and y.

answered Mar 14 '22 at 15:50

STTR13

39
7

Does CSS mix-blend-mode work with transform?

1 Answers1

Linked