Workaround for issue with IE scrollWidth

Question

I seem to have stumbled onto a bug in IE where the scrollWidth is off by 1px compared to the offsetWidth. The trigger to this seems to be dependent on the length of the text/ch

Answer 1

It's hard to give the best solution without knowing how this applies to your specific problem with this bug. That being said, you could:

• Use a javascript bug-fix to adjust the attributes/styles/etc. if the two elements are different sizes.

  if(iDifference != 0) { /* make adjustments. */ }

• Use a tolerance check between the two elements; if the difference is less than or equal to 2px, then don't worry about it and process everything as normal.

  if(Math.abs(iDifference) <= 2) { /* no problem here! */ }

• Use the outer element for all computations, since that has the true width of the container.

• Use the inner element for all computations, since that will never cause an overlap with the outer element.

• Do nothing! Why fix it if it isn't broken?

It all depends on what you're trying to do and how the 1px gap is causing a problem.

Answer 2

Found a workable workaround for the issue that would work in ie9+. Requires checking the elements getBoundingClientRect() width in addition to the scroll and offset width.

var boundingClientRectWidth = element.getBoundingClientRect().width;
var iScrollWidth = div.scrollWidth;
var iOffsetWidth = div.offsetWidth;

var amIOverflowing = (iScrollWidth > iOffsetWidth) && (boundingClientRectWidth == iOffsetWidth);

By check in IE if the boundingClient is forced to be the same size as the iOffsetWidth (instead of having a fractional width) we can ensure that we don't use the incorrect scroll width that is rounding up instead of down e.g. 273.36...

See this jsfiddle: http://jsfiddle.net/gskfke6L/1/

Answer 3

Try to set the padding-right: 1px; for the class .base.

.base{
    font-size: 16px; 
    overflow: hidden;
    padding-right: 1px;    
}