0

So when I use mix-blend-mode with transform property, mix-blend-mode stops working. Is there a work around? I know this is a duplicate question of Does CSS mix-blend-mode work with transform? but the mentioned question doesn't have an answer.

Bimal Pandey
  • 93
  • 2
  • 8
  • Please add code so we can see the problem for ourselves. See https://stackoverflow.com/help/minimal-reproducible-example – A Haworth Feb 12 '22 at 12:17
  • But it is still a duplicate. – Roko C. Buljan Feb 12 '22 at 12:17
  • @RokoC.Buljan it's a duplicate to a certain extent, but the earlier question is general - and thus I suppose doesn't need to have example code - whereas this one could be made more specific as the OP is talking about 'when I use mix-blend-mode with transform property' and I was hoping some code of the specific problem could help find a solution for their specific problem. The earlier question has no answer, and only very slight and not very deep discussion. Just marking this as duplicate will pretty much ensure it never gets answered or even properly discussed/explained. – A Haworth Feb 12 '22 at 12:30
  • I'm trying to recreate it in codepen, give me a minute.<3 – Bimal Pandey Feb 12 '22 at 12:33
  • @AHaworth that's exactly the reason I still have not marked it as a duplicate. In the hope it attracts an answerer. We can always close the other one if this gets answered - or vice-versa. – Roko C. Buljan Feb 12 '22 at 12:33
  • https://codepen.io/bimalpandeycode/pen/vYWZvao?editors=1111 This is the example, it somehow works on codepen but I tried it in both firefox and chrome, it didn't work. On my local machine whenever that class ".first" has transform:skewX(); , mix-blend-mode doesn't work but when I comment that css line out, it works. – Bimal Pandey Feb 12 '22 at 12:56

1 Answers1

0

OP- adding z-index to the div with mix-blend-mode fixed it. I found the answer in https://www.sitepoint.com/community/t/mix-blend-mode-conundrum/209068/4 forum

Bimal Pandey
  • 93
  • 2
  • 8
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 12 '22 at 21:07