Tooltip: pointer jagged during fade-in/fade-out (IE7, IE8) (#6555 resurfaced)

[jenzi]

Tooltip displays a black jagged line around the tooltip pointer during fade in and fade out. Once Toolip has reached 100% opacity the black line is not visible. The black line is only visible for a brief second.

[bill]

I remember seeing this a year ago and I thought I dealt w/it somehow.

But, which browsers is this happening on? Is this only happening on IE6? And, does it happen for the tooltips that go to the left/right, or just the above/below ones?

[davidmark]

Replying to bill:

I remember seeing this a year ago and I thought I dealt w/it somehow.

But, which browsers is this happening on? Is this only happening on IE6? And, does it happen for the tooltips that go to the left/right, or just the above/below ones?

It happens in all versions of IE with translucent PNGs. Easiest solution is to remove the translucent pixels from the images. If that will degrade the images (doesn't appear the case with these), use an alternate background style for IE (usually done with conditional comments.)

[bill]

Oh, this is a dup of #6555. Note that actually this is not happening on IE6 but it is happening on IE7 and IE8.

[13429] fixed this problem but then [15686] broke it again. But there's a tradeoff: making the fade-in / fade-out look better by using a gif image makes the static display look worse. Do you want me to switch IE to use the gif images?

GIF connector:

PNG connector:

[bill]

GIF connector look a little jagged but fade-in/fade-out works well

[bill]

PNG connector has fade-in problems but looks best after fade-in

[davidmark]

Replying to bill:

I would use the GIF's for IE. They can be cleaned up. All of the translucent pixels were converted to transparent. Can be duplicated with lighter shades of the primary color.

[davidmark]

Replying to davidmark:

Replying to bill:

I would use the GIF's for IE. They can be cleaned up. All of the translucent pixels were converted to transparent. Can be duplicated with lighter shades of the primary color.

Actually, for these images, I would just make the changes to the PNG's. They don't need translucency.

[bill]

Assuming that by "primary color" you are referring to the color of the tooltip border (ie, gray), I think your plan to make the semi-transparent pixels a lighter shade of gray will look bad when the page has a dark background.

You can try it though if you want, and we can test it.

[davidmark]

Replying to bill:

Assuming that by "primary color" you are referring to the color of the tooltip border (ie, gray), I think your plan to make the semi-transparent pixels a lighter shade of gray will look bad when the page has a dark background.

You can try it though if you want, and we can test it.

Looks like a light blue to me, but regardless if the image cannot be duplicated exactly without translucent pixels, there is no choice but to use a GIF equivalent for IE. The GIF equivalent can be made to look better than the conversion shown in the screen shot (just make the lines smooth by filling in the gaps.)

[bill]

(In [17692]) Switch back to using GIF images for tooltip connector on IE7 and IE8, to avoid display glitch during fade-in/fade-out. It doesn't look quite as good as the PNG though (once fade-in has completed), but I think it's an improvement overall.

Fixes #9369 !strict