0

I currently need to use mix-blend-mode for a project to multiply a image on a yellow div. It's working in chrome without any problems but in firefox, the image will turn black when the container has the same width and height as the image.

If the image is 1px higher it will run anyway. Anyone know why that happens?

Here is my code example. Try it in firefox and play around with the height value. It's going to turn black when you set the height to 500px.

Thanks for any help guys!

http://cssdeck.com/labs/t2uxoktu

.image {
  background: #ffff00;
  display: block;
  width: 500px;
  height: 505px;
}
.image img {
  mix-blend-mode: multiply;
}
<div class="image">
  <img src="http://unsplash.it/500/500">
</div>
Nico O
  • 13,762
  • 9
  • 54
  • 69
dome2k
  • 767
  • 6
  • 13
  • *If the image is 1px higher it will run anyway*- could you please elaborate on this? Also could you please include the code of the cssdeck snippet inside of your question? The possibility to include a code snippet is quite nice. – Nico O Jun 03 '15 at 08:19
  • @nicoO thanks, i added the code. – dome2k Jun 03 '15 at 08:23
  • Thanks for your reaction. I applied your code inside of a code snippet. If you don't like this, i will roll this edit back. Also: I can not reproduce any problems when setting the div to a `height: 500px`. Could you maybe append another snipped where the issue in Firefox is visible on your side? – Nico O Jun 03 '15 at 08:25

2 Answers2

3

I found that you need to set a background color behind the image and div for Firefox to render properly. So if your image takes up only part of the div that has mix-blend-mode set, the background div containing or behind the rest of the div needs a color set for the calculation to work. I was seeing partial black divs before setting the background color.

All that said, your example seems to be working in Firefox 41 as is now.

rylanb
  • 604
  • 6
  • 15
3

I know this is an older question, but I ran into it and found the solution. Add this CSS to the element with the blend mode.

transform: translateZ(0);
kthornbloom
  • 3,660
  • 2
  • 31
  • 46