ScrollWidth does not calculate correctly in certain conditions

Fixed Issue #11689089

Details

Author
Chris J.
Created
Apr 17, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
14.14393
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Issue
When an element is set to overflow: hidden; in certain situations, that appears to depend on what text is included in the element, an element will report a scrollWidth larger than the offsetWidth, even though the element is not overflowing. Other vendor browsers report the correct matching width. A discussion of the issue can be found here: http://stackoverflow.com/questions/30900154/workaround-for-issue-with-ie-scrollwidth

Expected: scrollWidth is the sane as offsetWidth
Actual: scrollWidth is reporting as 1px longer

Test case to reproduce: http://jsfiddle.net/w5cwhjbf/2/

<!-- language: lang-css -->

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

.wrapper{
    float: left;  
}

<!-- language: lang-html -->

<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>
Issue seems to be based on the character widths/font size resulting in I would assume a fractional value that in one case gets rounded up and the other rounded down.  The issue however does not ever cause scroll bars to appear (if overflow is auto).  Issue doesnt happen 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>

<!-- end snippet -->

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Status to “Fixed”

    • Hello,

      Thank you for providing this information about the issue. We are pleased to report this feature is fixed in Edge 16176 and is available in our latest Insider Preview build.

      Best Wishes,
      The MS Edge Team

    You need to sign in to your Microsoft account to add a comment.

    Sign in