4

once more a jQuery, Firefox flickering issue. (no flickering in IE6/7/8, Safari)

I uploaded an example page here: http://sithlord.bplaced.net/testing/jquery_flickering/flickering.html

There are two div containers. The inner div is the one I'm hiding. The outer one is the wraping container with the style elements. I found the flicker only occur with the selectbox. Without the SelectBox there is no flickering.

But thats not all: (I cant post a second hyperlink: its the same link as above; only change "flickering.html" to not_flickering.html)

In this case I selected a lower "option" - as you can see, the flicker disappears in this case. The same is happending, when there are less options in total. (less then about 20)

The only workaround I found is deleting the selectbox :)

Any ideas, why this is happening and how to fix it?

Thanks!

Sithlord
  • 109
  • 1
  • 6
  • known issue with how modern Firefox handles CSS https://bugzilla.mozilla.org/show_bug.cgi?id=787647 – hinekyle Jan 29 '13 at 20:45

4 Answers4

5

overflow:hidden; applied directly to the containing div works.

Boss Ninja
  • 171
  • 1
  • 6
0

Found this post. Try setting a width or height on the hidden div. I noticed you have no styles on your divs so its possible this may work.

Metropolis

Community
  • 1
  • 1
Metropolis
  • 6,542
  • 19
  • 56
  • 86
  • Hi Metropolos, thanks for your answer. You mean something like this? http://sithlord.bplaced.net/testing/jquery_flickering/hidden_select_appended.html But now you get an other bad effect. You 'see' the select box appear. And there is still the question, why this flicker appears with big hidden select boxes :) Greetings Sithlord – Sithlord May 24 '10 at 18:58
  • Width and Height arent helpin. Same flicker. – Sithlord May 24 '10 at 20:38
  • Also try to add overflow: hidden; to the hidden element – Metropolis May 24 '10 at 21:05
  • I already thriet the overflow: hidden "trick"; doesn't work. The 'p' elements are also just for testing. Could be span, div, or something else. Makes no difference. I think the problem is the select box. Just why? – Sithlord May 24 '10 at 21:24
0

Please see http://dev.jquery.com/ticket/5743 why such things are generally possible with jQuery. In short while the css function without parameters claims to only return values without updating anything, it actually updates the DOM in some cases.

user250343
  • 1,163
  • 1
  • 15
  • 24
0

I'm a bit late on this, but I ran into a similar problem. My solution: set display:none to the select before the animation, and then display:block after. Example:

 $("div#hidden").hide();
  $("a").click(function(e) {
    e.preventDefault();
    $("div#hidden select").css('display','none');
    $("div#hidden").slideDown(1000);
    $("div#hidden select").css('display','block');
    });
});

You could also use the jquery show/hide functions if you wanted to.

Ben Liyanage
  • 4,993
  • 1
  • 21
  • 23