CSS mix-blend-mode bug in OSX Firefox only

Question

I'm applying a CSS mix-blend-mode effect to certain images in a Jquery slideshow. This works on all browsers I've tested including Firefox on Windows, but does not work on Firefox on OSX. It appears that the mix-blend-mode gets applied to the whole slideshow, rather than the specified images, and all of the images blend together at once.

Link to my site: http://bit.ly/1hDawdu

As a note, this is on a Squarespace page. Here's an example of my Jquery code, which applies the effect to the 9th slide in the slideshow on a particular page:

$("#collection-53a70027e4b0c63fc41ac520 .slide:nth-child(9)").css("background", "#ff0000"); $("#collection-53a70027e4b0c63fc41ac520 .slide:nth-child(9) img").css("mix-blend-mode", "screen");

Any thoughts on what might be going on with this one browser?

EDIT:

in response to IMI below, the issue doesn't appear to have anything to do with how the mix-blend-mode is targeted. if you highlight the image on the splash page, or any image on the Index page, you will get the same crazy effects when you scroll the page. this seems to be specifically a mix-blend-mode issue with Firefox.

EDIT: Added Screenshot of visual mix-blend-mode rendering issues. Can be seen easily when page is resized.

i have not tried that yet and not really familiar with how to (i'm not a web developer!), but I will look into it. thanks! — David, Sep 03 '15 at 19:13
@David - You may want to update you question link to go to your "Archaeology Museum" page since that is the one your jquery code refers to. — IMI, Sep 04 '15 at 12:57

score 0 · Accepted Answer · edited May 23 '17 at 12:14

0

NEW UPDATE - 09/18/2015 - Another Solution (Possibly Better): This problem also seems to be resolved by forcing the browser to use GPU acceleration on elements that have mix-blend-mode. This solution does not change the layout like the border:1px solution does.

Instead of using:

.slide img {border: 1px solid white;}

Use this to force GPU Acceleration (Reference Link):

.slide img {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

Old (Accepted) Answer:

OK, I think the code you posted is fine. I think the problem is your script that you use to resize the images. Firefox seems to have a rendering problem with mix-blend-mode images that are not contained in their parent. When I add padding: 1px; to .slide the issue stops, at least for me.

I recommend to stop using JS to change the slide image size to a fixed pixel value and instead change the slide image css to the relative values of width:100%;height:auto;. This way, FF should always calculate the image as contained within the parent and apply the blend as desired.

Here is a link to another FF mix-blend-mode known bug. You may even want to report your issue here as it may be related.

EDIT: Another method using border on the image.

.slide img {border: 1px solid white;}

You can also try targeting firefox only by using the @-moz-document hack in your CSS file.

@-moz-document url-prefix() {
  .slide img {border: 1px solid white;}
}

This works for me on every image on your site that uses mix-blend-mode. By putting it on .slide .img as a default you do not need to worry about applying it nth-child elements and the 1px white border will have little to no visual impact since your page background is white. You will just have to live with the knowledge that your images are shifted right by 1px in the layout. But i don't think anyone will notice if you don't tell them.

edited May 23 '17 at 12:14

Community

1
1

answered Sep 03 '15 at 18:04

IMI

2,461
1
14
20

Thanks IMI. Squarespace is peculiar in the way you can target pages, apparently done with some magic on the back end, but the #collection- tag is how they recommend doing it. Page targeting seems to be working fine on all browsers, and I think the specific problem relates to mix-blend-mode. In case that might be the issue though, I'll try setting some other CSS properties to specific images other than mix-blend-mode as a test. – David Sep 03 '15 at 19:56
@David - I found the ID listed on a different page than the one you linked. I updated my answer. – IMI Sep 04 '15 at 00:48
wow that is really interesting, thanks so much. I tried padding: 1px and that seemed to work but it leaves the colored background showing through on the top and the left, which I haven't been able to fix. still, selecting an image with the cursor and then scrolling, on my index page for example, still creates the same bug. bummer. the JS resizing is pretty hard-wired into the SS template and think my capabilities are pretty limited in that regard. i will look into reporting this mozilla in any case... – David Sep 04 '15 at 02:06
would there be some other method to keep the content within the bounds of the parent without creating the background bleed through at the edges? I tried overflow:hidden on .slide but no luck... – David Sep 04 '15 at 02:17
@David - I updated my answer with a method using a border on the slide images. – IMI Sep 04 '15 at 12:56
Incredible, that seems to have done the trick! Thanks so much for your help and pointing me to the bugzilla page. I'm going to see what kind of progress I can make over there. – David Sep 04 '15 at 14:42
@David - I found another possible solution using GPU Acceleration and it does not require adding a border to the images. I have updated my answer. – IMI Sep 18 '15 at 15:42

CSS mix-blend-mode bug in OSX Firefox only

1 Answers1