snsa_kscc Posted June 14, 2022 Share Posted June 14, 2022 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 More sharing options...
Solution GreenSock Posted June 15, 2022 Solution Share Posted June 15, 2022 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? 1 1 Link to comment Share on other sites More sharing options...
snsa_kscc Posted June 15, 2022 Author Share Posted June 15, 2022 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now