CODEWITHSUNDEEP
cssinternet-explorerfilter
Richard Parnaby-King
Richard Parnaby-King

Reputation: 14862

CSS Using Filters in IE Causing IE to Lag

Related to this question, I have set up some jquery to pop-up a new div over an existing div. Whilst this works brilliantly in every other browser, the IE family refuse to behave nicely. With the following filters removed it works quickly (incorrectly, but quickly), whereas with the filters it takes a long time for the new div to appear / disappear. If left for long enough IE (6-8) will run through the jquery in order (i.e. it appears to be caching the creation/destruction of the new divs then replays them).

What do I need to do to get IE to act correctly and quickly?

The filters I am trying to use:

.newDiv
{
  opacity: 0; /*Every other browser*/
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*IE8*/
  filter: alpha(opacity=0); /*IE5-7*/
}

.newDiv:hover
{
  opacity: 1; /*Every other browser*/
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*IE8*/
  filter: alpha(opacity=100); /*IE5-7*/
}

Upvotes: 0

Views: 266

Answers (2)

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14862

In the end I used

.newDiv
{
 visibility:hidden;
}
.newDiv:hover
{
 visibility:visible;
}

This worked across all browsers except IE<=6 (cannot use :hover on anything but an anchor).

Upvotes: 0

locrizak
locrizak

Reputation: 12281

I would just jquery to set the opacity, you might have better luck and its one line compared to 3:

$('.newDiv').css('opacity','0');

Upvotes: 1

Related Questions