[SOLVED] With the use of css 3d transforms and perspective, I can't interract anymore with clickable elements in Firefox, but it works in chrome/Safari

With the use of css 3d transforms and perspective, I can't interract anymore with clickable elements in Firefox, but it works in chrome/Safari

I am building a simple page with paralax, using css 3d transforms. In chrome, everything works fine. In firefox, the parallax effects works well, however, I can't click anymore on buttons or links... as if something is in front of them (But really, there's nothing I can think of!).

I searched a lot but couldn't find the cause. Here's the link of the website

https://dallinge.dev/wp/maismec/ Do you have any idea what is blocking links/buttons from working in firefox? Is it a bug?

Thank you in advance!

Solution

I am not using CSS transforms that often, but there is surely an overusage of property:

-moz-transform-style: preserve-3d.

As w3schools article points out:

This property must be used together with the transform property.

This was also mentioned by the previous answerer @Jenny Pittman while I was writing this, so I hope you won't be mad :)

So what I did is I disabled this piece of your code:

.site-content > .inside #primary #main > article > .entry-content {
    -moz-transform-style: preserve-3d;
}

in the file all.css at line 999.

And for other elements to properly show up I added position: relative to your main sections CSS like so:

body:not(.has-sidebar):not(.search):not(.archive).home .entry-header-single > *, body:not(.has-sidebar):not(.search):not(.archive).home .page-content > *, body:not(.has-sidebar):not(.search):not(.archive).home .entry-footer > *, body:not(.has-sidebar):not(.search):not(.archive).home .entry-content-single > *, body:not(.has-sidebar):not(.search):not(.archive).home .post-navigation, body:not(.has-sidebar):not(.search):not(.archive).home .uagb-section__inner-wrap, body:not(.has-sidebar):not(.search):not(.archive).home .wp-block-group__inner-container {
    max-width: 1000px;
    width: 82%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

in the file all.css at line 881.

Edit:

I noticed that performing the actions above hides the second screen-wide photo you have. So I would suggest moving this element and it's next neighbour out of their parent element:

<div class="entry-content entry-content-single">
  ...
  <div class="wp-block-image size-full is-resized parallax">...</div>
  <div class="wp-block-group team">...</div>
</div>

and placing them right next to it like so:

<div class="entry-content entry-content-single">...</div>
<div class="wp-block-image size-full is-resized parallax">...</div>
<div class="wp-block-group team">...</div>

This should help.

Also you probably want to disable this:

.site-content > .inside #primary #main > article {
    -moz-transform-style: preserve-3d;
}

in the file all.css at line 997.