daveodden Posted June 29, 2021 Share Posted June 29, 2021 Hey GSAP Team! My team at work has implemented a "sticky" header using scrollTrigger and have seen some issues on some older device's browsers (iPhone SE, 8, 1st gen iPad Mini, etc.) where the header underlaps content. it seems that the z-index value of the pin-spacer is 0 instead of 3 - like it is in newer browsers/devices. My question is what compatibility should we expect with scrollTrigger's pinning functionality? See the Pen rNmNGzq by DaveOdden (@DaveOdden) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted June 29, 2021 Share Posted June 29, 2021 Pinning is just using position fixed and math to figure out start, end, and top positioning, so there shouldn't be much that isn't compatible, you may need to manually adjust some of the CSS (z-index) manually for deprecated browsers; I don't have any of the devices you mentioned, so not positive as to exactly what you're seeing. You're also starting with position fixed for your header in your CSS, which may (likely could) be creating issues. 2 Link to comment Share on other sites More sharing options...
daveodden Posted June 29, 2021 Author Share Posted June 29, 2021 I'll tinker with altering css/js and get back to you 1 Link to comment Share on other sites More sharing options...
daveodden Posted June 30, 2021 Author Share Posted June 30, 2021 Hey all, by using `z-index: 3 !important` on the .pin-spacer, I was able to mitigate the primary issue I've been seeing in older devices. I had concerns about targeting that specific pin-spacer but was able to use the sibling selector in css to target that specific pin-spacer reliably. I am _still_ seeing some unexpected behavior with the pin spacer periodically on older devices that I plan to investigate to gather a better understanding and will report back about that. I am still curious if the GSAP team tests in older browsers/devices. Link to comment Share on other sites More sharing options...
GreenSock Posted June 30, 2021 Share Posted June 30, 2021 3 hours ago, daveodden said: I am still curious if the GSAP team tests in older browsers/devices. Sure we do, but it's virtually impossible to test every feature in every scenario on every kind of device, especially with a product that has such a rich feature set. And virtually all browsers are "evergreen" now and roll out updates continuously, so the only realistic strategy is to build things as best we can and test in some popular browsers and then trust that if something breaks we'll hear about it from one of our users at which point we'll do our best to address it promptly. 3 hours ago, daveodden said: I am _still_ seeing some unexpected behavior with the pin spacer periodically on older devices We'd be happy to look at a minimal demo with clear instructions about how to reproduce the issue. We don't have an iPhone SE or first gen iPad mini, though, so if the problem only happens on those it likely means that old version of Apple's browser didn't follow standards or has bugs. We already work around quite a few bugs in various browsers but unfortunately it's impossible to solve every single bug in every browser on all devices. I'm not aware of anything in ScrollTrigger that would be problematic, though. I don't recall anyone else reporting something that hasn't already been fixed. My guess is that the issue may have to do with the way you're setting things up (CSS/HTML) but it's tough to say without a minimal demo. Good luck! Link to comment Share on other sites More sharing options...
daveodden Posted June 30, 2021 Author Share Posted June 30, 2021 roger that! I will set up a minimal demo after we release this work to explain the problem! thanks yall 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