translateZ function fails to function properly on Firefox browser

I've been experimenting with using translateZ to hide a child element called "list" behind the parent element "div2. It works perfectly in Chrome, but unfortunately, it's not working correctly on Firefox. Can anyone provide some guidance or help on this issue?

You can view the JSFiddle example by clicking on this link: translateZ on firefox

.list {
  width: 200px;
  height: 10px;
  background-color: yellow;
  -moz-transform: translateZ(-1em);
  -webkit-transform: translateZ(-1em);
}

For reference, here is the image: Image Link

The left side of the image shows the expected behavior in Chrome where the yellow bar is hidden behind the red div. The right side of the image displays the incorrect display in Firefox where the yellow bar is positioned in front of the red div.

htmlcssfirefoxcss-transforms

Answer №1

Remember, the CSS property transform-style: preserve-3d; cannot be inherited; it must be individually set for each descendant element in order to maintain them within the same 3D space.

While you have successfully preserved the 3D inheritance for elements #div1 and #div2, this preservation breaks down with the grandchild element .sub, causing a disruption in the lineage for the grandgrandchild element .list where the desired Z-transform should take place.

By including the transform-style: preserve-3d; rule in your CSS for the .sub element, you will effectively invite its child .list into the 3D environment, allowing for the application of the Z transform effect.

.sub {
  height: 20px;
  width: 50px;
  background-color: black;
  transform-style: preserve-3d;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying text and concealing image when hovering over a column in an angular2 table

I am currently using a table to showcase a series of items for my data. Each data entry includes an action column with images. I would like to implement a feature where hovering over an image hides the image and reveals text, and vice versa (showing the im ...

htmlcssangularclassng-style

Heroku - JavaScript and CSS Updates Causing Loading Issues

Ruby version: 2.1.5 | Rails version: 4.1.1 For some reason, the changes I make to my JavaScript and CSS files are not reflecting on Heroku; it seems like the cached assets are still being used. I've tried removing the assets and precompiling them bef ...

javascriptcssruby-on-railsherokuruby-on-rails-4.1

Can you identify the language of this HTML include code snippet?

Recently, I came across some .html files that include tags in a different format: [% INCLUDE '/path/to/footer.html' %] This bracket-and-percent-sign tag is unfamiliar to me. Does anyone know what it is used for? ...

htmltemplatestags

Creating a dynamic list filter using JavaScript and three select boxes

Looking for a way to implement a similar feature to the one on this webpage: I will be showcasing a list of brands on the page, with each brand requiring three pieces of information: Starting letter Store (multiple options) Category (multiple options) ...

phpjavascripthtmlwordpress

Ways to restrict a function to a single DOM element using either its id or class

This script is responsible for dynamically loading pages on my website. It works fine, except that it currently iterates over all anchor tags a on the site, whereas I want it to iterate only through my navigation menu. Here is the navigation menu: <div ...

javascriptjqueryhtmlajax

Guide to designing a dropdown navigation menu in GWT

Hey, I'm currently working on setting up a drop down menu using GWT and here's the layout I have in mind: | Categories | Pictures | Other | When the categories dropdown opens, my goal is to display the categories grouped in pairs. For example: ...

javacssgwt

Creating an email in Gmail with a pre-filled HTML body

Currently, I am developing a Django web application and seeking a way to enable my app to send emails via Gmail. I have explored creating a hyperlink that opens the compose window in Gmail, as well as prepopulating fields such as "to," "cc," "bcc," and bod ...

pythonhtmldjangogmailhtml-email

Add a directive on the fly, establish a connection, and display it dynamically

Within my markup, I have a tag element called popup-window which is handled by a specific directive. If I wish to incorporate multiple similar widgets that can be displayed or hidden in various locations, I currently need to include all these elements dire ...

javascripthtmlangularjs

Turn off Chrome 69's autofill functionality

I've recently encountered an issue with Chrome's password autofill feature that has been troubling me for a few days now. This problem began when I was using Chrome version 69. After much trial and error, I found a solution by removing the id an ...

javascripthtmlgoogle-chromeautocompleteautofill

What is the best way to extract the value from an anchor element?

To retrieve the value from an input tag, we can use <id>.value like this: <input type="text" #solutionInput (keyup)="0"><br> <solutionDetail [solutionName]="solutionInput.value" > </solutionDetail> Here, 'solutionInput& ...

htmlangular

Styling a playbook using CSS Grid management techniques

Exciting to create a playbook layout style, here's how it goes: Name: Text starting here - unique style #1 text that moves to a new line with a different look - unique style #2 more text continuing on another new line ...

htmlcssflexbox

Creating a stylish gradient text color with Material-UI's <Typography /> component

Is there a way to apply a gradient font color to a <Typography /> component? I've attempted the following: const CustomColor = withStyles({ root: { fontColor: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)", }, })(T ...

javascriptcssreactjsmaterial-uistyling

Tips for halting the movement of marquee text once it reaches the center briefly before resuming animation

Is there a way to make text slide in, pause when centered, and then repeat the process? I'm looking for some help with this animation. Here is the code snippet: <marquee direction="left" id="artistslide"> <span id="currentartist">< ...

javascriptjqueryhtmlmarquee

The submit button fails to produce any result

I have a submit button in a contact form that triggers PHP code to send an email. However, when I press the button nothing happens - not even the PHP code is displayed as it should be if PHP were not installed. Interestingly, I have tested other simple mai ...

phpjavascripthtml

Looping CSS text animation with typing effect

I am struggling with a CSS code that types out text, but it only does so once and I need it to repeat infinitely. Despite adding animation-iteration-count: infinite;, it still doesn't work as intended. Another issue is that it slows down at the end. H ...

htmlcssanimation

Switch classes while navigating within a div

My website has a sticky sidebar with a list of cars and their corresponding categories in a table: <ul class = "cars"> <li class=""><a href="javascript:void(0)" class="model" data-id="1"> BMW </a></li> ...... ...

javascriptjqueryhtmlcss

Using sandboxed iframes in HTML for secure `src` loading on Internet Explorer 11 and Microsoft Edge

Is there a way in IE11/Edge with HTML5 to populate a sandboxed iframe (<iframe sandbox></iframe>) with HTML without using a src url? I am searching for a solution similar to srcdoc that is compatible with all other modern browsers. Attempting ...

htmliframeinternet-explorer-11sandboxmicrosoft-edge

There are two separate CSS files linked to the same page, but the browser is only rendering the styles from

I am in the process of developing a new web page where I want to implement my own CSS and incorporate some components from this source: . I'm facing an issue with one of the components, as the browser seems to be applying only the styles from my custo ...

htmlcss

What are some strategies for dividing a webpage evenly between an image and a text-containing div?

I am currently working on emulating a layout that I came across on another website ( if you scroll down past the video and profiles). The layout involves splitting the page 50/50 with a picture that is responsive and maintains its size when the page is res ...

htmlcssreactjsmaterial-ui

Issues with Bootstrap offsetting columns within a fluid row

I am currently working on a fluid design layout, where I need to place form group elements inside the row-fluid with one specific condition - they must be aligned to the right side. <div class="row-fluid" style="background-color: #332619; color: #fff ! ...

htmlcsstwitter-bootstrap-3