Sameer_mishraa Posted March 24, 2022 Share Posted March 24, 2022 Hey @OSUblake Could you help me out one more time please? Here is my repository : https://github.com/Sameer-mishra1/Dbait-website As you can see in a desktop, when you scroll all the way to the bottom, the Download button doesn't seem to be working. When I inspected it a bit, I realised that there's some kind of overlap between the animation view and the button and that's why nothing happens on clicking the button. I am not able to figure out the exact reason though, please let me know what you think could be the plausible reason. https://drive.google.com/file/d/1iOcjNoqBP9sOtw6aJxG47Ldlgib293xj/view?usp=sharing Link to comment Share on other sites More sharing options...
OSUblake Posted March 24, 2022 Share Posted March 24, 2022 Hi Sameer, If you need help, please provide a minimal demo that clearly shows the issue. The simpler the demo, the better. Thanks! Link to comment Share on other sites More sharing options...
Sameer_mishraa Posted March 25, 2022 Author Share Posted March 25, 2022 See the Pen MWrJPBr by sameer-mishra1 (@sameer-mishra1) on CodePen Here is a codepen demo, as you can see, when you will scroll to the bottom, the download button present there in the desktop view, does not work. I am unable to understand why though. @OSUblake Link to comment Share on other sites More sharing options...
OSUblake Posted March 25, 2022 Share Posted March 25, 2022 That seems more like a CSS issue than a GSAP one. If I remove GSAP from the equation, you still have the same problem. See the Pen dyJNaYg by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted March 25, 2022 Solution Share Posted March 25, 2022 Your SVG is overflowing its container to the bottom and thus covering the button. You can either set overflow: hidden on that container wrapping your svg or add a position attribute to your button if you want to fix it with z-index, because... Quote z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements). https://www.w3schools.com/cssref/pr_pos_z-index.asp See the Pen PoEWLQJ by akapowl (@akapowl) on CodePen 1 1 Link to comment Share on other sites More sharing options...
Sameer_mishraa Posted March 26, 2022 Author Share Posted March 26, 2022 Thanks @akapowl I'll keep that in mind. Thank You so much. 1 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