Firefox failing to properly display CSS animations transitioning from behind other elements

Question

Firefox failing to properly display CSS animations transitioning from behind other elements

Check out this simple example to see what I'm referring to.

HTML

<div class="main-container">
<div class="ht-tx1"></div>
<div class="headtest"></div>
<div class="ht-tx2"></div>
</div>

CSS

.main-container {
    width: 100%;
    height: 200px;
    margin: 250px 0 0 0;
    position: relative;
    background-color: yellow;
}

.headtest {
    font-family: 'quicksand', helvetica;
    background-color: #a2aba2;
    width: 100%;
    height: 200px;
    position: absolute;
    top: 0;
    right: 0;
}

.ht-tx1 {
    width: 100%;
    height: 20px;
     text-align: center;
     background-color: #000;
     animation: test-ani1 2s forwards;
     position: absolute;
     top: 0;
     right: 0;
}

.ht-tx2 {
    width: 100%;
    height: 20px;
    text-align: center;
    background-color: #000;
    animation: test-ani2 2s forwards;
    position: absolute;
    bottom: 0;
    right: 0;
}



@keyframes test-ani1 {

    100% {
        transform: translateY(-20px);
    }
}

@keyframes test-ani2 {

    100% {
        transform: translateY(20px);
    }
}

-

In Chrome, both black bars slide out perfectly - one from behind and the other in front. However, in Firefox, the bar transitioning from behind is not working correctly. It sometimes appears at the end of the animation duration without sliding properly.

I have tried various solutions like using -moz- and adjusting positioning with z-index, but nothing seems to fix the issue.

EDIT ----

While I appreciate workarounds, I am more interested in understanding the root cause of this issue. Does anyone have any insights?

Thank you!

html css

Answer 1

Answer №1

Firefox seems to have some inconsistency when animating the transform property, and the reason for this is unclear at the moment. It's most likely a bug.

Here are two alternative solutions to achieve the same effect:

.main-container {
    width: 100%;
    height: 200px;
    margin: 50px 0 0 0;
    position: relative;
    background-color: yellow;
}

.headtest {
    font-family: 'quicksand', helvetica;
    background-color: #a2aba2;
    width: 100%;
    height: 200px;
    position: absolute;
    top: 0;
    right: 0;
}

.ht-tx1 {
    width: 100%;
    height: 20px;
     text-align: center;
     background-color: #000;
     animation: test-ani1 2s forwards;
     position: absolute;
     top: 0;
     right: 0;
}

.ht-tx2 {
    width: 100%;
    height: 20px;
    text-align: center;
    background-color: #000;
    animation: test-ani2 2s forwards;
    position: absolute;
    bottom: 0;
    right: 0;
}



@keyframes test-ani1 {
    0% {
        transform: translateY(-1px);
    }
    0.1% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-20px);
    }
}

@keyframes test-ani2 {
    100% {
        transform: translateY(20px);
    }
}

<div class="main-container">
<div class="ht-tx1"></div>
<div class="headtest"></div>
<div class="ht-tx2"></div>
</div>

.main-container {
  width: 100%;
  height: 200px;
  margin: 50px 0 0 0;
  position: relative;
  background-color: yellow;
}

.headtest {
  font-family: 'quicksand', helvetica;
  background-color: #a2aba2;
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
  right: 0;
}

.ht-tx1 {
  width: 100%;
  height: 20px;
  text-align: center;
  background-color: #000;
  animation: test-ani1 2s forwards;
  position: absolute;
  top: 0;
  right: 0;
}

.ht-tx2 {
  width: 100%;
  height: 0px;
  text-align: center;
  background-color: #000;
  animation: test-ani2 2s forwards;
  position: absolute;
  bottom: 0;
  right: 0;
}


@keyframes test-ani1 {
  100% {
    top: -20px;
  }
}

@keyframes test-ani2 {
  100% {
    height: 20px;
    bottom: -20px;
  }
}

<div class="main-container">
  <div class="ht-tx1"></div>
  <div class="headtest"></div>
  <div class="ht-tx2"></div>
</div>

Answer 2

Firefox seems to have some inconsistency when animating the transform property, and the reason for this is unclear at the moment. It's most likely a bug.

Here are two alternative solutions to achieve the same effect:

.main-container {
    width: 100%;
    height: 200px;
    margin: 50px 0 0 0;
    position: relative;
    background-color: yellow;
}

.headtest {
    font-family: 'quicksand', helvetica;
    background-color: #a2aba2;
    width: 100%;
    height: 200px;
    position: absolute;
    top: 0;
    right: 0;
}

.ht-tx1 {
    width: 100%;
    height: 20px;
     text-align: center;
     background-color: #000;
     animation: test-ani1 2s forwards;
     position: absolute;
     top: 0;
     right: 0;
}

.ht-tx2 {
    width: 100%;
    height: 20px;
    text-align: center;
    background-color: #000;
    animation: test-ani2 2s forwards;
    position: absolute;
    bottom: 0;
    right: 0;
}



@keyframes test-ani1 {
    0% {
        transform: translateY(-1px);
    }
    0.1% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-20px);
    }
}

@keyframes test-ani2 {
    100% {
        transform: translateY(20px);
    }
}

<div class="main-container">
<div class="ht-tx1"></div>
<div class="headtest"></div>
<div class="ht-tx2"></div>
</div>

.main-container {
  width: 100%;
  height: 200px;
  margin: 50px 0 0 0;
  position: relative;
  background-color: yellow;
}

.headtest {
  font-family: 'quicksand', helvetica;
  background-color: #a2aba2;
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
  right: 0;
}

.ht-tx1 {
  width: 100%;
  height: 20px;
  text-align: center;
  background-color: #000;
  animation: test-ani1 2s forwards;
  position: absolute;
  top: 0;
  right: 0;
}

.ht-tx2 {
  width: 100%;
  height: 0px;
  text-align: center;
  background-color: #000;
  animation: test-ani2 2s forwards;
  position: absolute;
  bottom: 0;
  right: 0;
}


@keyframes test-ani1 {
  100% {
    top: -20px;
  }
}

@keyframes test-ani2 {
  100% {
    height: 20px;
    bottom: -20px;
  }
}

<div class="main-container">
  <div class="ht-tx1"></div>
  <div class="headtest"></div>
  <div class="ht-tx2"></div>
</div>

Answer 3

Answer №2

The key to solving this issue lies in understanding the z-index property of your elements: if left unspecified, the elements stack on top of each other following the HTML document flow when their "position" is set to "absolute". In this case, "ht-txt1" is positioned beneath "headtest" while "ht-tx2" appears above it.

To fix this problem, both "ht-tx1" and "ht-tx2" should be assigned a "z-index" value of -1 so that they are hidden underneath "headtest".

For Firefox compatibility, it's important to add the -moz- prefix to your "transform" effect. You can refer to http://caniuse.com/#feat=transforms2d for more information.

Here's the CSS code snippet:

    .main-container {
        width: 100%;
        height: 200px;
        margin: 250px 0 0 0;
        position: relative;
        background-color: yellow;
    }

    .headtest {
        font-family: 'quicksand', helvetica;
        background-color: #a2aba2;
        width: 100%;
        height: 200px;
        position: absolute;
        top: 0;
        right: 0;
    }

    .ht-tx1 {
        width: 100%;
        height: 20px;
        text-align: center;
        background-color: #000;
        animation: test-ani1 2s forwards;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
    }

    .ht-tx2 {
        width: 100%;
        height: 20px;
        text-align: center;
        background-color: #000;
        animation: test-ani2 2s forwards;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: -1;
    }

    @keyframes test-ani1 {

        100% {
            -ms-transform: translateY(-20px);
            -webkit-transform: translateY(-20px);
            -moz-transform: translateY(-20px);
            transform: translateY(-20px);
        }
    }

    @keyframes test-ani2 {

        100% {
            -ms-transform: translateY(20px);
            -webkit-transform: translateY(20px);
            -moz-transform: translateY(20px);
            transform: translateY(20px);
        }
    }

Answer 4

The key to solving this issue lies in understanding the z-index property of your elements: if left unspecified, the elements stack on top of each other following the HTML document flow when their "position" is set to "absolute". In this case, "ht-txt1" is positioned beneath "headtest" while "ht-tx2" appears above it.

To fix this problem, both "ht-tx1" and "ht-tx2" should be assigned a "z-index" value of -1 so that they are hidden underneath "headtest".

For Firefox compatibility, it's important to add the -moz- prefix to your "transform" effect. You can refer to http://caniuse.com/#feat=transforms2d for more information.

Here's the CSS code snippet:

    .main-container {
        width: 100%;
        height: 200px;
        margin: 250px 0 0 0;
        position: relative;
        background-color: yellow;
    }

    .headtest {
        font-family: 'quicksand', helvetica;
        background-color: #a2aba2;
        width: 100%;
        height: 200px;
        position: absolute;
        top: 0;
        right: 0;
    }

    .ht-tx1 {
        width: 100%;
        height: 20px;
        text-align: center;
        background-color: #000;
        animation: test-ani1 2s forwards;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
    }

    .ht-tx2 {
        width: 100%;
        height: 20px;
        text-align: center;
        background-color: #000;
        animation: test-ani2 2s forwards;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: -1;
    }

    @keyframes test-ani1 {

        100% {
            -ms-transform: translateY(-20px);
            -webkit-transform: translateY(-20px);
            -moz-transform: translateY(-20px);
            transform: translateY(-20px);
        }
    }

    @keyframes test-ani2 {

        100% {
            -ms-transform: translateY(20px);
            -webkit-transform: translateY(20px);
            -moz-transform: translateY(20px);
            transform: translateY(20px);
        }
    }

Firefox failing to properly display CSS animations transitioning from behind other elements

While I appreciate workarounds, I am more interested in understanding the root cause of this issue. Does anyone have any insights?

Answer №1

Answer №2

Similar questions

Determining the window height using jQuery when overflow is set to hidden

Navigating through a Bootstrap slideshow with the help of directional arrows

jQuery not getting desired response from AJAX GET request

Div refuses to change its size

Enhance your Android desktop applications with cutting-edge CSS frameworks

Displaying PHP content using JavaScript classes

Adding additional text within the paragraph will result in the images shifting backwards when utilizing flexbox

Next and previous buttons are missing in simple HTML design when using Owl carousel

Issue with CSS and JS Files in Subdomains

Divide a single image into several smaller images and enable clickable links on each separate image, similar to an interactive image map

How can we seamlessly transition from adding a class to setting scrollTop on a particular div?

When using Angular 8 with RxJs, triggering API calls on click events will automatically detach if the API server is offline

Emblem pointing towards the header

Angular animation not firing on exit

Converting HTML to PDF in Flutter without using the flutter_html_to_pdf package for Flutter web compatibility

Unusual scrolling behavior in iOS 7 when using PhoneGap and jQuery Mobile

Navigating through cards in HTML: A guide to filtering techniques

Steps for dynamically changing the class of a dropdown when an option is selected:

Hiding the author, category, and date information from displaying on WordPress posts

Modifying the order of Vuetify CSS in webpack build process