Firefox ignoring CSS3 transition?

Question

So I've been trying to get a transition working properly in firefox, This is what I have at the moment:

index.html:

<button type="button" id="pushButton">Push Me!</button>

<div id="loginBackground" class="login-background">
    <div id="loginBox" class="login-box-inactive">

    </div>
</div>

global_style.css:

.login-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4);
}

.login-box-inactive, .login-box-active {
    display: flex;
    flex-flow: column nowrap;
    min-width: 150px;
    min-height: 150px;
    background: #fff;
    margin: auto;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}

.login-box-active {
    min-width: 350px;
    min-height: 350px;
    transition: width 2s, height 2s, ease-in-out, 0.5s;
}

finally, login.js:

"use strict";

var pushButton = document.getElementById("pushButton");

var loginBackground = document.getElementById("loginBackground");
var loginBox        = document.getElementById("loginBox");

pushButton.onclick = function() {
    loginBackground.style.display = "flex";
    loginBox.className = "login-box-active";
}

window.onclick = function(event) {
     if(event.target == loginBackground) {
         loginBackground.style.display = "none";
         loginBox.className = "login-box-inactive";
     }
}

AFAIK, pretty much every modern browser to date has standardised the transition tag so why is it that firefox is ignoring the transition tag entirely?

Thanks!

EDIT:

So I now have the following within my CSS file:

transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;

Chrome plays well and displays this as should. Firefox still continues to ignore them. I even prefixed -moz- on them and it still ignored them.

EDIT 2:

I would like the following to happen once the button is pressed:

1) User presses Press Me! button.

2) loginBackground then overlays any content below (imagine the button is not the only content on page), rendering none of it clickable.

3) User will then have a choice of filling form out within loginBox or clicking a closeButton or loginBackground , both of which have the following outcome:

3.1) Upon user clicking either closeButton or loginBackground the loginBox and loginBackground disappears, leaving content underneath usable.

Answer 1

The problem is both of these browsers handle the display property kind of differently. The execution of your transition depends on the display property of the loginBackground which is "display:none" initially. The box that is changing the dimension is a child of this division. Now, the interesting thing that is happening is:

Firefox is removing the child of the parent which has display:none set

Here's what firefox's mdn doc on display says:

In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.

That's why when you are toggling display value on firefox the transition's don't occur since it's kind of removed and reinserted; essentially making it have no previous value to start of the transition from.

If you apply the "login-box-active" class with a slight delay, everything starts working as expected

 "use strict"; var pushButton = document.getElementById("pushButton"); var loginBackground = document.getElementById("loginBackground"); var loginBox = document.getElementById("loginBox"); pushButton.onclick = function() { loginBackground.style.display = "flex"; setTimeout(function() { loginBox.className = "login-box-active"; }, 400) } window.onclick = function(event) { if(event.target == loginBackground) { loginBackground.style.display = "none"; loginBox.className = "login-box-inactive"; } } 

 .login-background { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0, 0, 0, 0.4); } .login-box-inactive, .login-box-active { display: flex; flex-flow: column nowrap; min-width: 150px; min-height: 150px; background: #fff; margin: auto; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4); } .login-box-active { min-width: 350px; min-height: 350px; transition: width 2s, height 2s, ease-in-out 0.5s; } 

 <button type="button" id="pushButton">Push Me!</button> <div id="loginBackground" class="login-background"> <div id="loginBox" class="login-box-inactive"> </div> </div> 

In the curious case of Chrome, it kind of does not remove the child of "display:none". That's why the transition works as usual on it.

Although, I would suggest to use simple opacity to achieve such effect instead of playing with display. Something, like this:

 "use strict"; var pushButton = document.getElementById("pushButton"); var loginBackground = document.getElementById("loginBackground"); var loginBox = document.getElementById("loginBox"); pushButton.onclick = function() { loginBackground.style.opacity = "1"; loginBox.className = "login-box-active"; } window.onclick = function(event) { if(event.target == loginBackground) { loginBox.className = "login-box-inactive"; loginBackground.style.opacity = "0"; } } 

 .login-background { opacity: 0; position: fixed; display: flex; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: rgba(0, 0, 0, 0.4); transition: opacity 2s; } .login-box-inactive, .login-box-active { display: flex; flex-flow: column nowrap; background: #fff; width: 150px; height: 150px; margin: auto; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4); transition: width 2s, height 2s, ease-in-out 0.5s; } .login-box-active { width: 350px; height: 350px; } 

 <button type="button" id="pushButton">Push Me!</button> <div id="loginBackground" class="login-background"> <div id="loginBox" class="login-box-inactive"> </div> </div> 

Answer 2

 transition: width 2s, height 2s, ease-in-out, 0.5s; 

This line seems to be incorrect.
Try to remove last value and move timing function to a separate property.