Opened 7 years ago

Closed 7 years ago

#16549 closed defect (wontfix)

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

Reported by: bill Owned by: bill
Priority: undecided Milestone: tbd
Component: Dijit Version: 1.8.3
Keywords: Cc:
Blocked By: Blocking:

Description

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

screenshot

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.

Attachments (3)

sample_tooltip.html (806 bytes) - added by bill 7 years ago.
reduced test case
tooltip.png (5.8 KB) - added by bill 7 years ago.
screenshot
reduced.html (2.4 KB) - added by bill 7 years ago.
dojo-less test case showing apparent safari bug

Download all attachments as: .zip

Change History (6)

Changed 7 years ago by bill

Attachment: sample_tooltip.html added

reduced test case

Changed 7 years ago by bill

Attachment: tooltip.png added

screenshot

Changed 7 years ago by bill

Attachment: reduced.html added

dojo-less test case showing apparent safari bug

comment:1 Changed 7 years ago by bill

Summary: Tooltip: text appears vertically second time tooltip shown with certain fonts (iOS6)Tooltip: text appears vertically second time tooltip shown with certain fonts (webkit)

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: "MS ゴシック";

comment:3 Changed 7 years ago by bill

Resolution: wontfix
Status: newclosed
Summary: Tooltip: text appears vertically second time tooltip shown with certain fonts (webkit)Tooltip: text appears vertically second time tooltip shown with MS ゴシック font-family (webkit)

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

body {
	font-family: "MS ゴシック", "ヒラギノ角ゴ 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.

Note: See TracTickets for help on using tickets.