InfoWindow popup callout arrow is "broken"

Question

Using JS API 3.2...on an intranet, so I can't provide a screen shot...when my map's popup window is positioned directly above or below the clicked map marker, the callout arrow is being drawn incorrectly.  For example, if the popup window is directly below the clicked map feature, the gray triangle is drawn above the popup window, and the blue triangle is drawn on top of and inside the content area of the popup window. This only happens when the popup is drawn directly below or above the clicked feature; all other callout arrows (top left, bottom right, etc.) are being drawn correctly.

BenScott1 · Answer

I am having the same problem with the popup pointer. It is possible to reference a local copy of popup.png and use css to point it to the correct section of the png etc for left, right, bottom, bottom right and bottom left pointers, but not for top left, top and top right.  My thread (currently unanswered) is below.

CSS for Javascript popups - odd behaviour

JasonZou · Answer

Can you post the portion of the code that shows the popup?

TyroneLigon · Answer

Best as I can determine, the popup window captures a portion of popup.png to display with the popup window, giving the captured portion a class name of .pointer.top or .pointer.bottom depending on the positioning. The portion that's being captured is incorrect for some reason - for .pointer.top the small blue triangle and the small gray triangle is being captured; for .pointer.bottom the small white triangle and a portion of the longer white triangle pointing down and to the right is being captured.

I was able to fix .pointer.bottom using CSS, but I couldn't reproduce that magic with .pointer.top; the final solution was to apply display:none to both .pointer.bottom and .pointer.top using CSS.