Firefox not working

[juanboardera]

Check that this is really a bug

• I confirm

Reproduction link

https://atroposjs.com/

Bug description

Buttons are not working on Firefox. To reproduce, please go to Atropos website in Firefox and try to click "Get Started". The button won't be responsive.

Tested on Firefox 94.0.1, Windows

Expected Behavior

The button "Get Started" should be clickable in Firefox

Actual Behavior

The button does not do anything.

Atropos version

1.0.1

Platform/Target and Browser Versions

Firefox 94.0.1, Windows

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Atropos issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

Hello, is there a workaround available for @nolimits4web please? We're using it in production and Firefox users are experiencing issues clicking on buttons. They cannot.

[deniercounter]

I can confirm that clicking the "Get Started" button it is not working (Ubuntu 20.04, FF 97.0 (64-bit)) without giving a hint in my F12 console. besides: Unexpected value NaN parsing x2 attribute.

The event on the button is: function Dr() {}

Unfortunately this is a game stopper.

[alvesvaren]

Same problem for me

[spartanatreyu]

I'm on Firefox 98.0.2.

I don't see any error in the console but the button isn't working BUT the problem seems to be with the css, not the js.

You can see it in firefox's devtools. When trying to inspect the button, the mouse isn't getting to the correct element, it's covered by another element.

Setting the following css seems to fix it:

.atropos > div, .atropos > span {
	pointer-events: none;
}

.atropos a {
	pointer-events: all;
}

I didn't see any issues with the CSS change in FF, Edge, or Safari.

[DaniFoldi]

As @spartanatreyu pointed out, in Firefox it seems like "there is some element above the one they're trying to interact with"

This is perhaps a bug in Firefox when they calculate the targeted element, as removing transform-style: preserve-3d allows the user to interact however breaks the effect, TLDR do not use this workaround, just some triage FYI, and even with it, if the element is not actually translate3d-d much, it works fine.

Update, I just found a workaround similar to the one above, in a bit more general form:

.atropos-scale {
  pointer-events: none;
}

.atropos-rotate {
  pointer-events: all;
}

Works in current Safari, Firefox, Chrome.

[Mlongen]

As @spartanatreyu pointed out, in Firefox it seems like "there is some element above the one they're trying to interact with"

This is perhaps a bug in Firefox when they calculate the targeted element, as removing transform-style: preserve-3d allows the user to interact however breaks the effect, TLDR do not use this workaround, just some triage FYI, and even with it, if the element is not actually translate3d-d much, it works fine.

Update, I just found a workaround similar to the one above, in a bit more general form:

.atropos-scale {
  pointer-events: none;
}

.atropos-rotate {
  pointer-events: all;
}

Works in current Safari, Firefox, Chrome.

You're the best!