[css-d] IE background flicker on a:hover
I've read a bunch of different techniques for dealing with background-
image flicker in IE (which seems to occur on a elements as well as
on other elements when their CSS properties are being modified by
JavaScript. Some have worked, some haven't, and some aren't
appropriate to all situations (for example, I don't think the double-
buffer method would work in a situation where I'm setting a:hover,
but I could be wrong.)
Anyway, I've come up with an additional technique that uses the IE
AlphaImageLoader filter (the one everyone uses to get IE to work with
transparent PNGs). In its simplest form, it looks like this:
a {
background-image: url(/img/some-image.gif);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/img/some-image.gif',
sizingMethod='crop');
}
a:hover {
background-image: url(/img/some-image-over.gif);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/img/some-image-over.gif',
sizingMethod='crop');
}
As far as I can tell it works like a charm. If you're using GIFs, you
don't even need a real browser branch: non-IE browsers will ignore
the filter, and everything will look fine in IE because it's layering
two copies of the same background image (whose pixels are either
completely transparent or completely opaque) on top of one another.
If you were using transparent PNGs instead, you'd need a branch.
Any thoughts on the pros and cons of this method? It seems simpler to
me than some, though it won't work for repeating background images.
--Dave
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE background flicker on a:hover
David Feldman wrote:
I've read a bunch of different techniques for dealing with background-
image flicker in IE
Anyway, I've come up with an additional technique that uses the IE
AlphaImageLoader filter
a {
background-image: url(/img/some-image.gif);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/img/some-image.gif',
sizingMethod='crop');
}
a:hover {
background-image: url(/img/some-image-over.gif);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/img/some-image-over.gif',
sizingMethod='crop');
}
Dave, as far as I know, the proprietary filter do apply on elements
which have layout. But the intention of your hack is to stop the
flicker, not to draw an additional layer. So I wonder if your method is
preventing the flicker on inline-level links without a dimension too?
Thanks,
Ingo
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE background flicker on a:hover
I *KNOW* if seen the solution to this somewhere before. I think i may have even used that solution at one point. However, i'm not finding it anywhere. I've set a background image to some link elements. Some of these elements are set to change on hover, others are not. However ALL of them flicker on hover in IE. The large banner on the following page being one example... http://access.truvisio.com/newyorkexpo/home/ Any ideas? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE background flicker on a:hover
On 7/20/05, Brian Campbell [EMAIL PROTECTED] wrote: I *KNOW* if seen the solution to this somewhere before. I think i may have even used that solution at one point. However, i'm not finding it anywhere. I've set a background image to some link elements. Some of these elements are set to change on hover, others are not. However ALL of them flicker on hover in IE. The large banner on the following page being one example... http://access.truvisio.com/newyorkexpo/home/ Any ideas? __ I don't understand the problem -- I don't see any flickering IE6/Windows __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE background flicker on a:hover
On 21/07/05, Brian Campbell [EMAIL PROTECTED] wrote: I *KNOW* if seen the solution to this somewhere before. I think i may have even used that solution at one point. However, i'm not finding it anywhere. I've set a background image to some link elements. Some of these elements are set to change on hover, others are not. However ALL of them flicker on hover in IE. The large banner on the following page being one example... http://access.truvisio.com/newyorkexpo/home/ Any ideas? You might find this useful: http://www.fivesevensix.com/studies/ie6flicker/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
