Jump to content
Search Community

mix-blend-mode doesn't work as it should with ScrollSmoother

snsa_kscc test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi guys!

 

I'm playing with ScrollSmoother and I have a situation. Codepen example is enclosed. Basically, ScrollSmoother causes ::after pseudo element to render in front of the typography therefore making mix-blend-mode not work properly.

 

Any help is appreciated greatly.

 

Best, SK

 

See the Pen VwQgMjp by snsa_kscc (@snsa_kscc) on CodePen

Link to comment
Share on other sites

  • Solution

That's because when you have a position: fixed element (which is what ScrollSmoother must do), it creates a new stacking context, as described here:

https://stackoverflow.com/questions/33223603/using-css-mix-blend-mode-with-a-child-of-a-position-fixed-element

 

(There are many other articles on the web - just Google "mix-blend-mode position fixed")

 

The solution is to just apply the background color to that content element. It looks like you forgot to create the wrapper and content <div> elements (please read the ScrollSmoother docs), so it created them for you automatically. So just create them yourself so you can style them, like:

See the Pen MWQLVwy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Hi Jack,

 

first of all, thank you very much for the detailed answer and for the effort to put up a codepen explainer. Sorry, I forgot to create wrapper and content divs, I was kind of doing my codepen in a hurry, but I'm familiar with the fact ScrollSmoother won't work without them.

 

Everything is crystal clear, thanks again, you made my day.

 

Have a nice day.

  • Like 2
Link to comment
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.
×
×
  • Create New...