Jump to content
Search Community

ScrollTrigger pinReparent styles

Ihatetomatoes test
Moderator Tag

Recommended Posts

I have a question regarding the styles applied to an element that is pinned with the pinReparent: true.

 

In the codepen demo, the first item in the navigation has a class .is-active and is green.

 

The issues

When the navigation is pinned with pinReparent set to true, the active link is white and not green, even through the styles are still applied.

 

Any idea why this is happening? And what are all the styles applied to the pinned element with pinReparent option? 

 

Lastest Chrome on Mac.

 

PS: I know this demo would work with simply not including the pinReparent option, but I am just showing a simplified demo of an issue that I am facing on a bigger project.

pinReparent.png

See the Pen qBbgQyv by ihatetomatoes (@ihatetomatoes) on CodePen

Link to comment
Share on other sites

Looks like a webkit bug. It works fine in FF on Mac. Discolored in Chrome, Brave, Safari, and Safari for iOS. 

 

I also noticed a different bug in that pen: If you resize when it's pinned its position goes wonky (but it does fix the color issue). That's true even in Firefox.

Link to comment
Share on other sites

Ha, that's super weird. Definitely a browser bug. Can't even fix it directly in Dev Tools. So strange!

 

And yeah, I'd strongly recommend avoiding pinReparent if there's any way you can. There are just a lot of caveats with it, though it can be quite helpful in rare situations. 

 

I'll look into the resizing glitch. I don't think there's anything I can do about the odd rendering browser bug though. 

Link to comment
Share on other sites

It was something like WebkitTextFillColor on the parent element that was somehow interfering. Very odd indeed. And it was a computed style on that element already (I have to loop through all the computed styles and apply them so that when it's reparented, it doesn't lose the styling it had). 

  • 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...