Comments (18)
I'm still kind of trying to figure out why so many people care about the buttons on the demo page being broken :D
This library pretty much does what it's supposed to do, it was originally coded by Matthew Wagerfield and then I refactored/rewrote the codebase. It's IMO now feature complete and still working, with the aside that Apple has crippled the gyroscope access because yet again bad actors couldn't behave and ruined it for the rest of us. Not really anything to work on right now, any more work I would put into would just bloat the codebase with features that are not strictly necessary.
The bug described in this ticket shouldn't happen, but also is not important enough to warrant me spending time on it if I don't have something else to do on the library anyways. Maybe Matthew feels different and will fix this (he's already been pinged in by now), but for me it's... just not important enough 🥴
from parallax.
But I did look at it, and man, it's crazy. Inspector says the link is at the right position, but I can confirm the clickable area is somewhere above the visual element. Seems to indeed be a Firefox bug?!
from parallax.
I can confirm the issue, it's not related to parallax.js though.
It can be fixed certainly with some CSS.
from parallax.
I didn't find the problem, but spent only limited time on it.
I would have posted it if I found it.
Might be related to JavaScript too, I didn't look at all into it.
from parallax.
Just download the active HTML of the modal window which should be easy in Firefox and show the open modal window even without JavaScript.
Remove all JS references and you can see only the impact of the CSS.
from parallax.
@reneroth thank you for taking a look at it despite your reservations. It's really weird (to me) and I'd like to narrow it down to submit a bug to Firefox if it has nothing to do with the CSS, etc. on the demo page.
@gitguys please do keep me updated if you find anything and do link the Mozilla bug report if you file one, this is exactly the kind of stuff I keep thinking about at 4am sometimes :D
I did find some hints at the root cause though:
vertical-align: middle
on one of the parent containers (.cell
) is causing this issue. It moves everything visually down, but the clickable area stays exactly where the element would be if the vertical align wasn't applied - but only if transform-style: preserve-3d
is applied as well.
But to make all of this harder to debug: it doesn't happen in isolation 🥴
from parallax.
I removed:
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
From .accelerate
and the issue is gone in Firefox (Android, Windows, macOS). Also doesn't seem to change any other behavior with the website that I can notice, so I suppose the preserve-3d
wasn't needed anyway?
from parallax.
@reneroth
From.accelerate
and the issue is gone in Firefox (Android, Windows, macOS). Also doesn't seem to change any other behavior with the website that I can notice, so I suppose thepreserve-3d
wasn't needed anyway?
I believe back in the day™ it used to improve performance with a lot of transforms going on, and also helped when doing funky z-axis stuff. It's still definitely a Firefox bug caused by some combination of things - vertical-align, transform-style and probably an unknown third thing at least. We'd need to isolate this and create a simplified demo to report this to Mozilla though.
from parallax.
I can confirm the issue, it's not related to parallax.js though. It can be fixed certainly with some CSS.
Thanks for looking at it. I tried changing a few things in CSS but nothing worked so far as I'm having trouble finding anything amiss.
from parallax.
It can be fixed certainly with some CSS.
Do you know where the CSS is having the problem?
from parallax.
this is only about the demo page, right? not something with the library itself?
from parallax.
@reneroth correct, it's not related to parallax itself.
The issue could perhaps be related to the CSS / JS for the parallax page though.
from parallax.
@reneroth @DavidBruchmann @wagerfield I do wonder if it's something to do with the JS. I've combed through the CSS and made various edits and nothing changes. The JS, on the other hand, is over my head I think. Then again, maybe the CSS is over my head and/or it's some odd combo of the JS/CSS both making Firefox funky?
from parallax.
@reneroth thank you for taking a look at it despite your reservations. It's really weird (to me) and I'd like to narrow it down to submit a bug to Firefox if it has nothing to do with the CSS, etc. on the demo page. It affects only the links within the div class="panel accelerate"
including the text links only within that dropdown div from what I've seen. Place links anywhere else on the page outside of the "panel accelerate" div and they perform as expected.
from parallax.
A bit offtopic:
@wagerfield – I think Github has downgraded me to "Collaborator" – could you bump me up to "Maintainer" again? Thanks :)
from parallax.
@reneroth I have removed and re-invited you as a collaborator.
GitHub doesn't provide any further options for level of access to the repo...just the notion of collaborators and that's it.
Perhaps they renamed the role of maintainer to collaborator? There are no options for adding maintainers, only collaborators.
What are you unable to do that you were able to do before?
from parallax.
@reneroth I have removed and re-invited you as a collaborator.
GitHub doesn't provide any further options for level of access to the repo...just the notion of collaborators and that's it.
Perhaps they renamed the role of maintainer to collaborator? There are no options for adding maintainers, only collaborators.
What are you unable to do that you were able to do before?
Thank you, I am able to manage issues now again. Not sure what that was 🤔
from parallax.
I had the same issue on the doc sidebar links for Motion One docs.
from parallax.
Related Issues (20)
- found bugfix for mediastream handling HOT 1
- Demo link is broken HOT 2
- Not working with absolute positioned layers HOT 1
- Firefox: Buttons and Links in Parallax Scene doesn't work anymore after scrolling.
- [DOC] Faulty Demo Link HOT 3
- Parallax layer flickering on mobile landscape mode HOT 1
- Parallax animations moving really slow on Mac Chrome HOT 6
- [support] parallax only updates on click in react HOT 3
- Demo link in README is broken HOT 1
- Does not work with Angular Universal HOT 1
- npm install doesn't seem to work when using `import` HOT 6
- Gyroscope troubleshooting on WordPress HOT 1
- Uncaught ReferenceError: Parallax is not defined HOT 1
- Img starting position HOT 1
- issue to import it
- Anyway to disable parallax only for Mobile Devices. HOT 3
- Request to add a clock, date and weather text HOT 8
- Works awesome… not on mobile though HOT 2
- Bug! this repos home page shows up in desktop HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from parallax.