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

1. Is this a known limitation?
2. Is there a CSS-based workaround?

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

Danettedaney

I'm seeing the same thing in Chrome and not in Firefox. – Christopher

Still having issues in chrome but not firefox – Libyan

Answer 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.

Diabolic