Tooltip: text appears vertically second time tooltip shown with ＭＳ ゴシック font-family (webkit)

[bill]

See attached test case. The tooltip shows fine the first time, but the second time it appears vertically:

The problem is that Tooltip.orient() is setting the width to 12, since in this block size.width is 12 (for some reason):

// reset width; it may have been set by orient() on a previous tooltip show()
this.domNode.style.width = "auto";

// Reduce tooltip's width to the amount of width available, so that it doesn't overflow screen.
// Note that sometimes widthAvailable is negative, but we guard against setting style.width to a
// negative number since that causes an exception on IE.
var size = domGeometry.position(this.domNode);
...

It works correctly if you remove the font setting.

[bill]

reduced test case

[bill]

screenshot

[bill]

dojo-less test case showing apparent safari bug

[bill]

Turns out this happens on android and chrome (both mac and windows) too. I guess it's a general webkit issue.

It also happens by merely setting the font to: font-family: "ＭＳ ゴシック";

[bill]

Filed ​https://bugs.webkit.org/show_bug.cgi?id=106611.

[bill]

So, the workaround is simple, either just remove that ＭＳ ゴシック font or remove it conditionally for webkit:

body {
	font-family: "ＭＳ ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Droid Sans", monospace !important;
}
.dj_webkit body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Droid Sans", monospace !important;
}

I don't think it's worth adding any workaround code to dijit itself. Eventually webkit will fix their bug.