I’m running Firefox 4 on Windows 7 with a DPI setting of 144 dpi. I have a web page with a 3rd party datepicker that has a select boxes for the Month and Year fields. The problem is that Firefox will not render the up/down arrows, so the user cannot select a date.
I have taken the month select box out of the datepicker and isolated the problem. In the screenshot below, Firefox (left) does not show up/down arrows for size:2 and size:3. IE (right) shows them correctly.
HTML code for the select box with size:2:
<select size="2"><option>January</option><option>February</option><option>March</option><option>April</option><option>May</option><option>June</option><option>July</option><option>August</option><option>September</option><option>October</option><option>November</option><option>December</option></select>
I could modify the datepicker to use a different size (1 or 4) or use a lower DPI, but it may not be an option for some of my users. Any ideas … if not a fix, then a cause…?
This is exactly what you would expect when you leave the safety and comfort of 96 or 120 DPI.
Although Microsoft have been nagging developers for years about high DPI, the standard of support for DPI > 120 is still depressingly poor.
Application developers need to do a lot of testing in order for their applications to work well at a wide range of DPI values. I can see how it happens that applications fail at some DPI values and for a browser which renders all sorts of weird and wonderful content it must be even hard to come up with comprehensive tests. All the same, this is clearly a bug in Firefox and you should submit a bug report and hope for the best!
As an aside, I recently performed some high DPI testing on my app and took at all the way up to 192 DPI. The app worked a treat but it looked really weird. Don’t try this unless you’ve got a high resolution monitor because on a small monitor it can be hard to change the settings back to something more manageable!