Strange link problem only with Firefox (Windows, Mac, mobile, etc.

[gitguys]

The clickable links in the info panel are offset in a different, invisible area above their intended location. No other browser is doing this, just every version of Firefox. Is there a fix for this?

Best way to show this is with a gif animation:

https://i.imgur.com/izvNi4q.gif

[DavidBruchmann]

I can confirm the issue, it's not related to parallax.js though.
It can be fixed certainly with some CSS.

[gitguys]

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.

[gitguys]

It can be fixed certainly with some CSS.

Do you know where the CSS is having the problem?

[DavidBruchmann]

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.

[reneroth]

this is only about the demo page, right? not something with the library itself?

[DavidBruchmann]

@reneroth correct, it's not related to parallax itself.
The issue could perhaps be related to the CSS / JS for the parallax page though.

[gitguys]

@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?

[DavidBruchmann]

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.

[reneroth]

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 🥴

[reneroth]

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?!

[gitguys]

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

[reneroth]

@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 🥴

[gitguys]

@reneroth

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?

[reneroth]

@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 the preserve-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.

[reneroth]

A bit offtopic:
@wagerfield – I think Github has downgraded me to "Collaborator" – could you bump me up to "Maintainer" again? Thanks :)

[wagerfield]

@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?

[reneroth]

@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 🤔

[KickAgency]

I had the same issue on the doc sidebar links for Motion One docs.