IE Invisible DIV Bug
-
Below is an HTML file. Try to guess which DIV will be invisible in IE, then scroll down to see why...
<html>
<head>
<title>WTF</title>
<style type="text/css">
div
{
filter: alpha(opacity = 100);
border-color: Green;
border-style: solid;
border-width: 1px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div style="background-color: #020509;"></div>
<div style="background-color: #02050A;"></div>
<div style="background-color: #02050B;"></div>
</body>
</html>The middle DIV will be transparent because any element with the color #02050A that also has the filter set to an opacity (even if fully opaque) will appear transparent in IE8 (and probably other versions of IE).
-
Below is an HTML file. Try to guess which DIV will be invisible in IE, then scroll down to see why...
<html>
<head>
<title>WTF</title>
<style type="text/css">
div
{
filter: alpha(opacity = 100);
border-color: Green;
border-style: solid;
border-width: 1px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div style="background-color: #020509;"></div>
<div style="background-color: #02050A;"></div>
<div style="background-color: #02050B;"></div>
</body>
</html>The middle DIV will be transparent because any element with the color #02050A that also has the filter set to an opacity (even if fully opaque) will appear transparent in IE8 (and probably other versions of IE).
Quite a feature. This[^] seems to suggest one is in trouble as soon as some pixel in an image has that particular color!? :)
Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles] Nil Volentibus Arduum
Please use <PRE> tags for code snippets, they preserve indentation, and improve readability.
-
Quite a feature. This[^] seems to suggest one is in trouble as soon as some pixel in an image has that particular color!? :)
Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles] Nil Volentibus Arduum
Please use <PRE> tags for code snippets, they preserve indentation, and improve readability.
Quite right; that's actually one of the links I came across when Googling this issue. I am using jQuery to fade between images for a slideshow. Only problem is that some of the pixels would appear white during the fade transition. Turns out this IE bug is the reason why that's happening. The fix we decided on was to put a black image behind the images so that the transparent pixels will appear to be black. We could have also edited each image so the pixels weren't that specific color, but that's a bit hard to do when JPEG compression can alter colors... and I don't think the artists would appreciate having to edit a certain color out of all their images.
-
Quite right; that's actually one of the links I came across when Googling this issue. I am using jQuery to fade between images for a slideshow. Only problem is that some of the pixels would appear white during the fade transition. Turns out this IE bug is the reason why that's happening. The fix we decided on was to put a black image behind the images so that the transparent pixels will appear to be black. We could have also edited each image so the pixels weren't that specific color, but that's a bit hard to do when JPEG compression can alter colors... and I don't think the artists would appreciate having to edit a certain color out of all their images.
The real fix is to not use IE at all (not really an option, of course)
-
Quite right; that's actually one of the links I came across when Googling this issue. I am using jQuery to fade between images for a slideshow. Only problem is that some of the pixels would appear white during the fade transition. Turns out this IE bug is the reason why that's happening. The fix we decided on was to put a black image behind the images so that the transparent pixels will appear to be black. We could have also edited each image so the pixels weren't that specific color, but that's a bit hard to do when JPEG compression can alter colors... and I don't think the artists would appreciate having to edit a certain color out of all their images.
aspdotnetdev wrote:
The fix we decided on was to put a black image behind the images so that the transparent pixels will appear to be black.
Could you use a background color that was 1 RGB value from from the transparent color? (e.g. #02050B instead of black) I think the difference wouldn't even be perceptible at that point.
Before .NET 4.0, object Universe = NULL;
-
aspdotnetdev wrote:
The fix we decided on was to put a black image behind the images so that the transparent pixels will appear to be black.
Could you use a background color that was 1 RGB value from from the transparent color? (e.g. #02050B instead of black) I think the difference wouldn't even be perceptible at that point.
Before .NET 4.0, object Universe = NULL;
That's basically what we did, but we chose black, which is close enough to the color that the difference is imperceptible.
-
aspdotnetdev wrote:
The fix we decided on was to put a black image behind the images so that the transparent pixels will appear to be black.
Could you use a background color that was 1 RGB value from from the transparent color? (e.g. #02050B instead of black) I think the difference wouldn't even be perceptible at that point.
Before .NET 4.0, object Universe = NULL;
Oh, do you mean change the color of the ORIGINAL image, rather than the image behind it? As I explained in the post you replied to, that would be extra work for the designers and, due to JPEG compression, would be troublesome.