Encountered a peculiar bug in IE where the scrollWidth is consistently off by 1px compared to the offsetWidth. This anomaly appears to be triggered by the length of text/characters within the element, specifically when overflow is set to something other than visible.
If you are curious about why I am cross-checking these values, refer to this question: HTML - how can I show tooltip ONLY when ellipsis is activated
To see an example of the issue, visit: http://jsfiddle.net/w5cwhjbf/2/
.base{
font-size: 16px;
overflow: hidden;
}
.wrapper{
float: left;
}<div class="wrapper">
<div id="div1" class="base">
Why is my scrollWidth wrong in IE?
</div>
</div>
<br style="clear: both;">
<br>
<button id="btn1" onclick="fnCheckScroll(div1,btn1)">Calculates Wrong</button>
<br>
<br>
<br>
<div class="wrapper">
<div id="div2" class="base">
Why is my scrollWidth right in IE?
</div>
</div>
<br style="clear: both;">
<br>
<button id="btn2" onclick="fnCheckScroll(div2,btn2)">Calculates Correctly</button>
<br>
<br>
<br>
The issue seems to stem from the character widths/font size resulting in what appears to be a fractional value that gets rounded up or down inconsistently. However, this does not cause scroll bars to appear (with overflow set to auto) and does not occur with overflow: visible.
<script type="text/javascript">
function fnCheckScroll(div, btn)
{
var iScrollWidth = div.scrollWidth;
var iOffsetWidth = div.offsetWidth;
var iDifference = iScrollWidth - iOffsetWidth;
btn.innerHTML = ("Width: " + iOffsetWidth + "px | scrollWidth: " + iScrollWidth + "px | Difference: " + iDifference + "px");
}
</script>In the example, despite having sufficient space for expansion, the first item's width is set 1px too short, or the reported scrollWidth is 1px too big. Additionally, no scrollbar is displayed (even with CSS set to overflow: auto), indicating that IE recognizes the lack of actual overflow within its code.
I'm interested to know your suggested fix or workaround for this random issue based on characters/font/font-size within the div?