Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
scotland_jack

Issues with safari perspective / mix-blend-mode

Recommended Posts

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!

 

 

 

 

Screen Shot 2019-11-06 at 4.57.44 am.png

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

Share this post


Link to post
Share on other sites

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!

  • Like 2

Share this post


Link to post
Share on other sites

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! 

  • Like 1

Share this post


Link to post
Share on other sites

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.

 

:)

  • Like 4

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×