Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#9369 closed defect (fixed)

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

Reported by: jenzi Owned by:
Priority: high Milestone: 1.4
Component: Dijit - LnF Version: 1.3.0
Keywords: Tooltip - look and feel Cc:
Blocked By: Blocking:

Description (last modified by bill)

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.

Attachments (3)

tooltip_transparency_issue.png (21.3 KB) - added by jenzi 11 years ago.
gifConnector.png (4.2 KB) - added by bill 11 years ago.
GIF connector look a little jagged but fade-in/fade-out works well
pngConnector.png (4.3 KB) - added by bill 11 years ago.
PNG connector has fade-in problems but looks best after fade-in

Download all attachments as: .zip

Change History (12)

Changed 11 years ago by jenzi

comment:1 Changed 11 years ago by bill

Description: modified (diff)
Summary: Tooltip Transparency IssueTooltip: pointer jagged during fade-in/fade-out

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?

comment:2 in reply to:  1 Changed 11 years ago by 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.)

comment:3 Changed 11 years ago by bill

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

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:

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

PNG connector:

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

Changed 11 years ago by bill

Attachment: gifConnector.png added

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

Changed 11 years ago by bill

Attachment: pngConnector.png added

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

comment:4 in reply to:  3 ; Changed 11 years ago by 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.

comment:5 in reply to:  4 Changed 11 years ago by 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.

comment:6 Changed 11 years ago by 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.

comment:7 in reply to:  6 Changed 11 years ago by 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.)

comment:8 Changed 11 years ago by bill

Resolution: fixed
Status: newclosed

(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

comment:9 Changed 11 years ago by bill

Milestone: tbd1.4
Note: See TracTickets for help on using tickets.