One of the most curious bugs I ever came across was found deep inside a third-party JavaScript grid component. This grid component had a fixed height and width. It calculated column widths by taking the total grid width and distributing it to the different columns, each of which got a certain, predefined percentage.
On Mac OS X, everything looked nice. But on Windows, the column headers were oddly shifted and did not match the content columns. While investigating the bug, we found out that the columns were shifted by exactly 17 pixels to the left. But why 17 pixels? And not 5, 10, 15 or anything power of 2?
It turned out that the grid component also took the scroll bar width into account to reserve this space if the scrollbar is shown, i.e. if the height of all grid rows exceed the given height of the grid. This scroll bar width matches 17 pixels in most browsers on Windows with default display settings (source):
| Browser (Windows) | Scroll Bar Width |
|---|---|
| Internet Explorer | 17px |
| Chrome | 17px |
| Firefox | 17px |
You can check your current scroll bar width using the Scrollbar Pixel Width Test from the same author that wrote the article linked above.
This effect did not occur on OS X, because the scroll bar width always equals zero pixels here. OS X only has a floating scroll bar that appears while scrolling rather than a static one, therefore no space is reserved. (The author of the above test states that it would not work on OS X. In fact, the test works perfectly: The scrollbar pixel width on OS X simply is 0 pixels.)
It seems that nobody seriously tested the grid component on Windows. And while Macs are widespread in the world of web and/or cross-platform development, an important thing to keep in mind is that you should always test your components and/or apps on all of the target platforms to ensure that everybody can enjoy your app. Don’t expect your component or app to run perfectly on all platforms if you saw it running on a single platform only.
Fun fact: Microsoft Edge’s scroll bar on Windows 10 has a width of 12 pixels.
