502518 - <select> items have mismatched hilightcolor / border on Windows CE

Status: RESOLVED FIXED

(Core :: Widget, defect, P3)

Description

[Justin Dolske [:Dolske]]

Items in a <select> dropdown have a dotted border and blue hilight color when mousing over them on Windows CE.  The rectangles enclosed by these two things seem vertically mismatched by 1 pixel. Sometimes the top/bottom dotted border is too high, sometimes it is too low.

Visible on Options -> General, dropdown for "When Firefox starts:". Seems like the 1st and 3rd items have the dotted outline box 1 pixel too short, such that the bottom border is inside the blue area (ie, there's a solid row of blue pixels at the bottom of the item). The 2nd seems to have a box that's 1 pixel too tall, such that the top border is outside the blue area.

Comment 1

[Justin Dolske [:Dolske]]

I'm pretty sure what's happening here the the result of fractional-height fonts...

I noticed in DOMi that the font is 12px Tahoma, and the computed CSS height ends up as 16.4833. I'm guessing that as fractions accumulate, some entries get rounded up to 17 px and some down to 16, while the dotted border is somehow out of sync?

I've also noticed this problem on normal menus (File, Edit, etc), where the height of menu items alternates between 16 and 17px tall. There's no misplaced dotted border, though, so the effect is subtle.

If I change the font to 13px Times, the CSS height is 17.95, and the problem goes away (or is probably at least only visible on 1 out of 20 sequential menuitems). If I change the font to 11px Tahoma, the CSS height is 13.2833, which would imply 1/4 to 1/3 of the menuitems would be sized differently. And, indeed, on a long test menu I get pixel heights (measured from a screenshot) of 16,16,17,16,16,16,17,16,16,17,16,16,16,17.

Comment 2

[Justin Dolske [:Dolske]]

The patch in bug 505284 fixes this problem too. \o/

Comment 3

[Justin Dolske [:Dolske]]

Fixed by bug 505284.