I've run across a bug and am wondering if others have found a
workaround or solution. I have an absolutely positioned div with a
background image that has .png alpha transparency. Debugging has
isolated the issue to jQuery's fadein effect. It also errs with
animate({opacity}). It works fine before calling the animation.
A screenshot demonstrating it in Safari (left) and IE (right) post-
animation.
I can't offer you a solution (unfortunately), but I can at least
clarify the problem for you a bit further:
This issue is not a jQuery issue as such, it is an IE7 filter issue
and is a known and documented problem with the way IE address things
like clear type (anti-aliased) text rendering and PNG opacity when
IE's in built filters are applied.
So, the good news (or is that bad news?) is that this isn't a jQuery
'bug', and the bad news (or is that just - more bad news?), is that
I'm not aware of any workaround for this.
"Certain filters may not behave as expected due to how filters are
implemented. Filters work by rendering the content of their attached
element to their work surface and then modifying that surface before
compositing it to the output surface. Because of this, alpha blending
of a transparent PNG with non-binary transparency may lead to
unexpected results. For example, applying a BasicImage filter with an
opacity attribute to an IMG element with a transparent PNG will fill
the work surface with the transparent PNG alpha alpha blended with a
solid gray background. The work surface will then be alpha blended at
the specified opacity level with whatever is under the filter."
Hope that helps a bit, and if you come up with a solid solution,
please share :)
Ian
On Aug 5, 5:31 am, Chuck <asdi...@gmail.com> wrote:
> I've run across a bug and am wondering if others have found a
> workaround or solution. I have an absolutely positioned div with a
> background image that has .png alpha transparency. Debugging has
> isolated the issue to jQuery's fadein effect. It also errs with
> animate({opacity}). It works fine before calling the animation.
> A screenshot demonstrating it in Safari (left) and IE (right) post-
> animation.
> I can't offer you a solution (unfortunately), but I can at least
> clarify the problem for you a bit further:
> This issue is not a jQuery issue as such, it is an IE7 filter issue
> and is a known and documented problem with the way IE address things
> like clear type (anti-aliased) text rendering and PNG opacity when
> IE's in built filters are applied.
> So, the good news (or is that bad news?) is that this isn't a jQuery
> 'bug', and the bad news (or is that just - more bad news?), is that
> I'm not aware of any workaround for this.
> Specifically the excerpt below from that article:
> "Certain filters may not behave as expected due to how filters are
> implemented. Filters work by rendering the content of their attached
> element to their work surface and then modifying that surface before
> compositing it to the output surface. Because of this, alpha blending
> of a transparent PNG with non-binary transparency may lead to
> unexpected results. For example, applying a BasicImage filter with an
> opacity attribute to an IMG element with a transparent PNG will fill
> the work surface with the transparent PNG alpha alpha blended with a
> solid gray background. The work surface will then be alpha blended at
> the specified opacity level with whatever is under the filter."
> Hope that helps a bit, and if you come up with a solid solution,
> please share :)
> Ian
> On Aug 5, 5:31 am, Chuck <asdi...@gmail.com> wrote:
> > Hey all,
> > I've run across a bug and am wondering if others have found a
> > workaround or solution. I have an absolutely positioned div with a
> > background image that has .png alpha transparency. Debugging has
> > isolated the issue to jQuery's fadein effect. It also errs with
> > animate({opacity}). It works fine before calling the animation.
> > A screenshot demonstrating it in Safari (left) and IE (right) post-
> > animation.
> In other words: Internet Exploder sucks... and that sucks, as most
> people are using it. ;_;
> On Aug 5, 12:05 am, kuralj <opt...@gmail.com> wrote:
> > Hi,
> > I can't offer you a solution (unfortunately), but I can at least
> > clarify the problem for you a bit further:
> > This issue is not a jQuery issue as such, it is an IE7 filter issue
> > and is a known and documented problem with the way IE address things
> > like clear type (anti-aliased) text rendering and PNG opacity when
> > IE's in built filters are applied.
> > So, the good news (or is that bad news?) is that this isn't a jQuery
> > 'bug', and the bad news (or is that just - more bad news?), is that
> > I'm not aware of any workaround for this.
> > Specifically the excerpt below from that article:
> > "Certain filters may not behave as expected due to how filters are
> > implemented. Filters work by rendering the content of their attached
> > element to their work surface and then modifying that surface before
> > compositing it to the output surface. Because of this, alpha blending
> > of a transparent PNG with non-binary transparency may lead to
> > unexpected results. For example, applying a BasicImage filter with an
> > opacity attribute to an IMG element with a transparent PNG will fill
> > the work surface with the transparent PNG alpha alpha blended with a
> > solid gray background. The work surface will then be alpha blended at
> > the specified opacity level with whatever is under the filter."
> > Hope that helps a bit, and if you come up with a solid solution,
> > please share :)
> > Ian
> > On Aug 5, 5:31 am, Chuck <asdi...@gmail.com> wrote:
> > > Hey all,
> > > I've run across a bug and am wondering if others have found a
> > > workaround or solution. I have an absolutely positioned div with a
> > > background image that has .png alpha transparency. Debugging has
> > > isolated the issue to jQuery's fadein effect. It also errs with
> > > animate({opacity}). It works fine before calling the animation.
> > > A screenshot demonstrating it in Safari (left) and IE (right) post-
> > > animation.
<twistedtalon1...@comcast.net> wrote:
> I guess the solution is to use the show() function and not fade.
> show("slow") produces the same black background.
> On Aug 7, 5:24 am, Yereth <yer...@gmail.com> wrote:
> > In other words: Internet Exploder sucks... and that sucks, as most
> > people are using it. ;_;
> > On Aug 5, 12:05 am, kuralj <opt...@gmail.com> wrote:
> > > Hi,
> > > I can't offer you a solution (unfortunately), but I can at least
> > > clarify the problem for you a bit further:
> > > This issue is not a jQuery issue as such, it is an IE7 filter issue
> > > and is a known and documented problem with the way IE address things
> > > like clear type (anti-aliased) text rendering and PNG opacity when
> > > IE's in built filters are applied.
> > > So, the good news (or is that bad news?) is that this isn't a jQuery
> > > 'bug', and the bad news (or is that just - more bad news?), is that
> > > I'm not aware of any workaround for this.
> > > Specifically the excerpt below from that article:
> > > "Certain filters may not behave as expected due to how filters are
> > > implemented. Filters work by rendering the content of their attached
> > > element to their work surface and then modifying that surface before
> > > compositing it to the output surface. Because of this, alpha blending
> > > of a transparent PNG with non-binary transparency may lead to
> > > unexpected results. For example, applying a BasicImage filter with an
> > > opacity attribute to an IMG element with a transparent PNG will fill
> > > the work surface with the transparent PNG alpha alpha blended with a
> > > solid gray background. The work surface will then be alpha blended at
> > > the specified opacity level with whatever is under the filter."
> > > Hope that helps a bit, and if you come up with a solid solution,
> > > please share :)
> > > Ian
> > > On Aug 5, 5:31 am, Chuck <asdi...@gmail.com> wrote:
> > > > Hey all,
> > > > I've run across a bug and am wondering if others have found a
> > > > workaround or solution. I have an absolutely positioned div with a
> > > > background image that has .png alpha transparency. Debugging has
> > > > isolated the issue to jQuery's fadein effect. It also errs with
> > > > animate({opacity}). It works fine before calling the animation.
> > > > A screenshot demonstrating it in Safari (left) and IE (right) post-
> > > > animation.
<twistedtalon1...@comcast.net> wrote:
> I guess the solution is to use the show() function and not fade.
> show("slow") produces the same black background.
> On Aug 7, 5:24 am, Yereth <yer...@gmail.com> wrote:
> > In other words: Internet Exploder sucks... and that sucks, as most
> > people are using it. ;_;
> > On Aug 5, 12:05 am, kuralj <opt...@gmail.com> wrote:
> > > Hi,
> > > I can't offer you a solution (unfortunately), but I can at least
> > > clarify the problem for you a bit further:
> > > This issue is not a jQuery issue as such, it is an IE7 filter issue
> > > and is a known and documented problem with the way IE address things
> > > like clear type (anti-aliased) text rendering and PNG opacity when
> > > IE's in built filters are applied.
> > > So, the good news (or is that bad news?) is that this isn't a jQuery
> > > 'bug', and the bad news (or is that just - more bad news?), is that
> > > I'm not aware of any workaround for this.
> > > Specifically the excerpt below from that article:
> > > "Certain filters may not behave as expected due to how filters are
> > > implemented. Filters work by rendering the content of their attached
> > > element to their work surface and then modifying that surface before
> > > compositing it to the output surface. Because of this, alpha blending
> > > of a transparent PNG with non-binary transparency may lead to
> > > unexpected results. For example, applying a BasicImage filter with an
> > > opacity attribute to an IMG element with a transparent PNG will fill
> > > the work surface with the transparent PNG alpha alpha blended with a
> > > solid gray background. The work surface will then be alpha blended at
> > > the specified opacity level with whatever is under the filter."
> > > Hope that helps a bit, and if you come up with a solid solution,
> > > please share :)
> > > Ian
> > > On Aug 5, 5:31 am, Chuck <asdi...@gmail.com> wrote:
> > > > Hey all,
> > > > I've run across a bug and am wondering if others have found a
> > > > workaround or solution. I have an absolutely positioned div with a
> > > > background image that has .png alpha transparency. Debugging has
> > > > isolated the issue to jQuery's fadein effect. It also errs with
> > > > animate({opacity}). It works fine before calling the animation.
> > > > A screenshot demonstrating it in Safari (left) and IE (right) post-
> > > > animation.
> I've run across a bug and am wondering if others have found a
> workaround or solution. I have an absolutely positioned div with a
> background image that has .png alpha transparency. Debugging has
> isolated the issue to jQuery's fadein effect. It also errs with
> animate({opacity}). It works fine before calling the animation.
> A screenshot demonstrating it in Safari (left) and IE (right) post-
> animation.
<twistedtalon1...@comcast.net> wrote:
> I have this problem also, but I have seen examples of what I am trying
> to do that do work with transparency in IE7.
Did you ever find a workaround to this problem. I have discovered the
same issue. I have a png which is a background image for an
information balloon div, which I prefer to fade in and out rather than
appear totally abruptly. Kinder on the eyes. The partially transparent
area of the png appears in black in IE7 and solid white in Chrome.
My current workaround is just a gif image instead, for IE and Chrome,
done by php. I did attempt some limited partial transparency on this,
by putting in by hand some transparent pixels into the area I would
have preferred to be partially transparent. This only works because
the partially transparent area is white (a shadow) and the page
background is also white.
> I can't offer you a solution (unfortunately), but I can at least
> clarify the problem for you a bit further:
> This issue is not a jQuery issue as such, it is an IE7 filter issue
> and is a known and documented problem with the way IE address things
> like clear type (anti-aliased) text rendering and PNG opacity when
> IE's in built filters are applied.
> So, the good news (or is that bad news?) is that this isn't a jQuery
> 'bug', and the bad news (or is that just - more bad news?), is that
> I'm not aware of any workaround for this.
> Specifically the excerpt below from that article:
> "Certain filters may not behave as expected due to how filters are
> implemented. Filters work by rendering the content of their attached
> element to their work surface and then modifying that surface before
> compositing it to the output surface. Because of this, alpha blending
> of a transparent PNG with non-binary transparency may lead to
> unexpected results. For example, applying a BasicImage filter with an
> opacity attribute to an IMG element with a transparent PNG will fill
> the work surface with the transparent PNG alpha alpha blended with a
> solid gray background. The work surface will then be alpha blended at
> the specified opacity level with whatever is under the filter."
> Hope that helps a bit, and if you come up with a solid solution,
> please share :)
> Ian
> On Aug 5, 5:31 am, Chuck <asdi...@gmail.com> wrote:
> > Hey all,
> > I've run across a bug and am wondering if others have found a
> > workaround or solution. I have an absolutely positioned div with a
> > background image that has .png alpha transparency. Debugging has
> > isolated the issue to jQuery's fadein effect. It also errs with
> > animate({opacity}). It works fine before calling the animation.
> > A screenshot demonstrating it in Safari (left) and IE (right) post-
> > animation.
