Share Posted July 23, 2020 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. See the Pen qBbgQyv by ihatetomatoes (@ihatetomatoes) on CodePen Link to comment Share on other sites More sharing options...
Share Posted July 23, 2020 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 More sharing options...
Share Posted July 23, 2020 Windows FF - all fine with the color (same wonky position Zach mentioned on resize) Chrome and Edge - color problems on the .is-active class. 1 Link to comment Share on other sites More sharing options...
Share Posted July 23, 2020 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 More sharing options...
Share Posted July 26, 2020 I think I've got it figured out in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js See the Pen 0e313b7d27dca9b33bd5800a5bdd193e?editors=0010 by GreenSock (@GreenSock) on CodePen Better? Thanks for reporting that. It was a tricky one to hunt down. 👍 2 Link to comment Share on other sites More sharing options...
Author Share Posted July 26, 2020 Works like a charm Jack, thanks for the update. When will the next release be available on CDN? Link to comment Share on other sites More sharing options...
Share Posted July 26, 2020 Not sure, but probably within a week or so. 👍 Link to comment Share on other sites More sharing options...
Share Posted July 26, 2020 1 hour ago, GreenSock said: I think I've got it figured out What was causing the color issue? Link to comment Share on other sites More sharing options...
Share Posted July 26, 2020 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). 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