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

htmlcss3dtransformperspective


Solution 1:[1]

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.

Solution 2:[2]

While I don't exactly have a fix, I do have a cause. After opening the Inspector in Firefox, I found that your links become clickable if I turn off: 

.site-content {
    -moz-transform-style: preserve-3d;
}

or if I set it to:

.site-content {
    -moz-transform-style: flat;
}

This style is defined in all.css on line 986.

While I can't speak to the best use of -moz-transform-style, I can recommend either researching how to make it work with your layers or turning it off for Firefox. You should be able to keep the nifty 3d effect for other browsers.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Jenny Pittman

Related Questions