View Full Version : Experiencing slideIn/slideOut flicker in IE 7

7 Sep 2011, 10:22 AM
Hi all,
This is my first ever post in here. Ok, I have a div element which will be slid and shown to the user(slideIn) when he clicks on expand button of the div's container. It's hidden until then. Again, if the user clicks on collapse button, the div will be taken off the display(slideOut).

var tr = document.getElementById(TR_ID);
var div = document.getElementById(DIV_ID);
if(obj.className == 'expand') {
obj.className = 'collapse';
Ext.get(div).slideIn('t', {duration: 1, useDisplay:true, callback: function(obj){
var task = new Ext.util.DelayedTask(function(){
//render something to div using xtemplate and unmask.
else {
obj.className = 'expand';
Ext.get(div).slideOut('t', {duration: 1, useDisplay:true,callback: function(obj){
document.getElementById(tr).style.display = 'none';

And the div(DIV_ID) will be within the TR(TR_ID). The problem I'm facing is that, with IE7, there is noticeable flickering everytime I click the expand (during slideIn) and collapse(during slideOut) buttons! All is well with Firefox, so can't seem to zero in on the issue at all.

After reading through a few discussions on this, they say, styling the div element with overflow:hidden settles things. Unfortunately it doesn't. Anyone know why this happens? Or maybe how I can avoid this flickering in IE? Thanks in advance.

8 Sep 2011, 4:12 AM
Ok I found the culprit. The culprit being the dev rendering part + unmasking. My requirement was like, on click of expand, an AJAX call should be made and json data should be fetched from the rest service. So I masked the div while fetching the data and overwrote the div with the obtained data which didn't need unmasking. Bu if I unmask and then render content(which isn't meaningful at all IMO), things are good in IE7. I don't, for the love of life, know why!

//render something to div using xtemplate and unmask.

works if I

//unmasked and then rendered the content to div using xtemplate.