SpryTooltip Placement in Safari
I have had an outstanding bug in my queue for the placement of the SpryTooltip in the Safari browser. It is something that I didn’t have a whole lot of time to invest in, but am finally getting back around to. The fix, so simple it’s astounding, but tracing back to find it was a pain!
The problem:
In the Safari Browser, the tool tip would come up at position 0×0 every single time. In IE and Firefox, the placement was always correct.
The technical problem:
var pos = Spry.Widget.Utils.getBorderBox returns a position object with the coordinates as follows:
pos.x = NaN
pos.y = NaN
At first, I corrected pos.x and pos.y like this:
pos.x = pos.x ? pos.x : 0;
pos.y = pos.y ? pos.y : 0;
Making this change means that any place I use this code I would have to make this correction, which is not really what I’m looking for. But since I know this works, I can go back to getBorderBox and added in some alerts to show me what was really going on. As it turns out, during the traversing of the tags, one of them is returning NaN. So I applied the same type of change here:
while (parent && parent.tagName != ‘BODY’ && parent.tagName != ‘HTML’)
{
/* If parent.scroll(Left|Top) returns NaN, correct to 0 */
if (isNaN(parent.scrollLeft))
parent.scrollLeft = 0;
if (isNaN(parent.scrollTop))
parent.scrollTop = 0;ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
}
return ret;
This small change is enough to correct the output, which places the button in the same area as the other browsers – until you scroll.
The last part of the bug to fix is that scrolling does not adjust where the spry tool tip appears in Safari. This may be something that I created while debugging, so I will take the function from the original code, make the minor changes above, validate, and then press on.
