element.style.display = 'none' not working in firefox but is in chrome

Question

I have this animated button tray that I am using -moz-transition and -webkit-transition on at one point I hide the buttons and then un-hide them in a new position. This is working fine in Chrome but for some reason its not hiding the elements in Firefox (ignoring IE for now another guy in the office specializes in that so he will make it work there poor soul).

I am wondering if it has something to do with the -moz-transition and if it behaves in a different manner then the -webkit-transition really the only thing I can think of.

Here is the function hiding the buttons(there is one with the exact same syntax for the right side):

          function hide_slide_left(button_one, button_two){

            if(button_two == ''){
                button_one.style.display = 'none';
                button_one.style.left = -120 + 'px';
                var t = setTimeout(function(){show_slide_left(button_one,button_two)}, 10);
            }else{
                button_one.style.display = 'none';
                button_two.style.display = 'none';
                button_one.style.left = -120 + 'px';
                button_two.style.left = -230 + 'px';
                var t = setTimeout(function(){show_slide_left(button_one,button_two)}, 10);
            }
         }

Show_slide_left sets the button_one.style.display = 'block'

Here is the css for the animation:

        .buttons li {
          -webkit-transition: all .5s ease-in-out;
          -moz-transition: all .5s ease-in-out;
          z-index: 0;
        }

and here is the css for the buttons(there are 4 more of them 5 total in the tray):

        #button0{
          background: url(images/some_background_image.png) no-repeat;
          height: 117px;
          float: left;
          left:50px;
          width: 134px;
          display: block;
          cursor: pointer;
          position: absolute;
        }

Here is part of the function that calls hide_slide_left:

             var button_temp1 = '';
             var button_temp2 = '';
             var s = '';

             s = ((cc + 4)%5);
             cc = ((cc-number + 5)%5);

             if(number == 1){
                button_temp1 = document.getElementById("button"+ s);
                var t= setTimeout(function(){hide_slide_left(button_temp1, button_temp2)},500);
             } else {
                button_temp1 = document.getElementById("button"+ s);
                s = ((s+4)%5);
                button_temp2 = document.getElementById("button"+ s);
                // button_temp2.style.left = 50 + 'px';
                var t= setTimeout(function(){hide_slide_left(button_temp1, button_temp2)},500);
                // button_temp1.style.left = 194 + 'px';
             }

cc is a global variable used to keep track of where the buttons are in the tray and s as you can see is local scope just used to select the buttons to be moved.

The reason I am trying to hide the buttons before they are re-positioned is so that the user does not see where then go until they are in their final position.

Also if I change the timeout delay in hide_slide_left then it sorta works in Firefox but it still is buggy (sometimes the buttons just appear instead of animating sometimes they don't) and it introduces all sorts of graphical lag into the animation that I can't really tolerate. So still looking for help.

Any help would be appreciated but I am only using JavaScript not jQuery thanks.

Here is a jsFiddle to demonstrate what I am doing: jsFiddle.

If you look at it in Chrome then it works fine when the blocks go off screen they disappear and then reappear on the other side and slide into place. In Firefox they don't disappear they just slide under(or over) the other elements and sometimes don't go as far as they should. I am really confused as to why Firefox is behaving so much differently.

You might be able to re-hide it when the transition is complete. I'm just guessing. See: http://stackoverflow.com/questions/2087510/callback-on-css-transition — Diodeus - James MacFarlane, Sep 02 '11 at 20:58
Can you post a link to a complete testcase showing the problem? Reassembling the pieces ou posted into a single page gives a page that works fine for me.... — Boris Zbarsky, Sep 03 '11 at 00:09

score 3 · Accepted Answer · answered Dec 05 '12 at 21:22

@Neil is partly correct. The reason its not working is because of the way that Mozilla has implemented transitions.

However its the opposite of what he said. The transition is applied, its the display:none that is not applied. It essentially gets overruled by the fact that there is a transition rule in the css.

The way around this (currently, hopefully Mozilla changes their implementation) is to use multiple functions and 2 different css class rules. (which is bulky but still can be simpler then moving something with javascript).

So your first class has a transition on it that moves the tile off screen. It then gets a new class that has no transition rule. you can then set its position with javascript to the opposite side of the carousel and it will go there instantly without being visible because it no longer has a transition property. Finally you re-apply the transition class, and move it to its final position on the other side of the carousel.

The effect is the same as achieved in Chrome, but definitely not as elegant.

score 1 · Answer 2 · answered Sep 02 '11 at 20:58

1

The only thing missing in your code is a closing brace for the function, but I'm sure you have that in your code since it's working on Chrome.

It's strange, works on my machine in both FF and Chrome -- how are you calling hide_slide_left and what is button_one and button_two when you call it?

answered Sep 02 '11 at 20:58

goatslacker

10,032
2
15
15

yea forgot the closing } when copying. Its hard to explain as I am doing a very complicated animation and this is only one part of it. part of the reason I am using javascript and not jquery since there's nothing in jquery for what I am doing would just have to build it myself anyways. I will post part of the function that calls hide_slide_left. – Ryan Sep 02 '11 at 21:07

score 1 · Answer 3 · edited Feb 02 '16 at 16:38

1

I don't think Firefox applies transitions when you use a style of display: none; - you'll need to hide your button in a different way, perhaps with visibility: hidden;.

edited Feb 02 '16 at 16:38

kenorb

155,785
88
678
743

answered Sep 02 '11 at 21:00

Neil

54,642
8
60
72

1

Negative. `display: none` removes it's block positioning whereas `visibility: hidden` will maintain it's width and height. You want `display: none` – goatslacker Sep 02 '11 at 21:05

score -1 · Answer 4 · answered Sep 02 '11 at 20:54

-1

try this

setAttribute( 'style', 'display:none' )

instead of

style.display = 'none';

i cant test it yet but i think there some strange behaviors in FF.

answered Sep 02 '11 at 20:54

YeppThat'sMe

1,812
6
29
45

element.style.display = 'none' not working in firefox but is in chrome

4 Answers4

Linked