Issues with safari perspective / mix-blend-mode

[scotland_jack]

Hey all, 

 

This is my first time posting here, so let me know if i've given too much / too little detail! 

 

I'm having an issue with some css on safari, essentially I have a series of elements, positioned along the Z-axis with transform: translateZ, in order to achieve a parallax effect, however, I would also like to apply a mix blend mode to some of the elements on the page. This works fine on Chrome and FireFox, and displays as expected, however it completely breaks the site on Safari with the content appearing extremely zoomed in, i'm not sure what to try to rectify the issue, i've tried attaching prefixes to everything however this doesn't seem to make any difference, I have attached an image bellow of what the page looks like when viewed in Safari.

 

Any help would be really appreciated thanks!

 

 

 

 

See the Pen JjjLyEO by scotland_jack (@scotland_jack) on CodePen

[ZachSaucier]

Hey Jack, welcome to the GreenSock forums.

 

Your post is pretty good - just about the right length with a demo that shows the issue relatively minimally. The only problem is that it doesn't use GSAP  This is a GreenSock forum focused on GSAP so you may or may not get an answer from other forum members here. 

 

Normally I'd take a closer look but we're working on releasing GSAP 3 right now so it has most all of my attention. Cool project though!

[scotland_jack]

Hey @ZachSaucier thanks for getting back to me, Somehow in my absolute code induced stupor I didn’t even click that the forums were for a proprietary product, I just read a few threads and saw that there were some CSS geniuses in the mix. 

 

I’ve been scouring high and low for a solution, as far as I can gather it’s an issue with how Safari handles positioning along the z-index, but i’m too annoyed to do anything meaningful with that information at the moment ? 

 

Hopefully someone can spare a few minutes to help, my sanity would appreciate it! 

[Jonathan]

Hello @scotland_jack and Welcome to the GreenSock Forum!

 

When i viewed your above codepen , I did not see the CSS property mix-blend-mode in there.

 

There is a bug with Safari when trying to use mix-blend-mode with elements that have 3d transforms.

 

You can usually get around it by adjusting your z-index, adding -webkit-backface-visibility: visible or also adding CSS hack of transalte3d(0,0,0) for your transform.

 

The trick is to make sure that your element with a transform is also brought on the same rendering layer as the mix-blend-mode so it can render them together on the same layer.