With high DPI displays a pixel (unit) is not longer identical to a pixel (picture element), so many units end up being translated to fractional px ones. This can then matter when setting values to align objects.
Unfortunately this makes the .clientWidth and similar properties imprecise as they only return a rounded value.
The .getBoundingClientRect() function returns the unrounded values and seems the answer. But it only does so after transforms have been applied, if any, so is not necessarily reliable if looking to manipulate an element's style settings where you need to provide the pre-transform values.
So that only seems to leave the getComputedStyle() function, or its older IE alternatives, checking box models etc. and performing calculations to end up with a consistent and reliable value.
Great in most browsers where the .width property simply returns the inner size of the element with or without borders and padding depending on box model. But Webkit ones subtract the scrollbar width if there is a visible one. And unfortunately there are no methods to detect it a scrollbar is displayed, and if so its size, to be able to calculate easily.
So, is there a reliable way of finding the unrounded width of an element without setting the .style.overflow property to hidden to measure the width then resetting it? Whilst that offers a solution, it is very inefficient.
Incidentally, looking at the jQuery code the width values it returns are the rounded .offsetWidth adjusted by the unrounded padding and margin if appropriate. So although it may give an unrounded result it is not necessarily accurate.
