scrollWidth/scrollHeight incorrect value when SVG uses viewBox and text element.

Duplicate Issue #102463 • See Issue #623632

Details

Created
Apr 27, 2014
Privacy
This issue is public.
Duplicates
See progress on Bug #623632
Found in build #
0.0011
Reports
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce

URL = http://w8-corey/bugs/viewBox_html.html

URL:

Repro Steps:

==============

Run the sample code in IE10

Issue #1

The parent div scrollWidth and scrollHeight must be 300, 200. But IE10 gives 381 and 369. It is a critical issue. It seems, IE10 has many bugs in SVG.

function check() {

var div = document.getElementById(“parentDiv”);

var svg = document.getElementById(“svg”);

var str = “Parent Div: Width=” + div.clientWidth + “px, height=” + div.clientHeight + "px";

alert(str);

str = “SVG: Width=” + svg.clientWidth + “px, height=” + svg.clientHeight + "px";

alert(str);

str = “Parent Div incorrect: scrollWidth=” + div.scrollWidth + “px, scrollHeight=” + div.scrollHeight + "px";

alert(str);

}

<body>

<div id="parentDiv" style="overflow: auto; width: 300px; height: 200px;">

<svg id="svg" width="300px" height="200px" version="1.1" viewbox="0 0 300 200" preserveaspectratio="none"

xmlns="http://www.w3.org/2000/svg">

<desc>Example ViewBox</desc>

<rect x="0" y="0" width="300" height="200" fill="yellow" stroke="blue" stroke-width="1" />

<text x="100" y="10" font-size="12" font-family="Verdana" >Stretch to fit</text>

<text x="100" y="30" font-size="12" font-family="Verdana" >Stretch to fit</text>

<text x="100" y="50" font-size="12" font-family="Verdana" >Stretch to fit</text>

<text x="100" y="10" font-size="12" font-family="Verdana" >Stretch to fit</text>

<text x="100" y="70" font-size="12" font-family="Verdana" >Stretch to fit</text>

<text x="100" y="90" font-size="12" font-family="Verdana" >Stretch to fit</text>

<text x="100" y="110" font-size="12" font-family="Verdana" >Stretch to fit</text>

<text x="100" y="130" font-size="12" font-family="Verdana" >Stretch to fit</text>

</svg></div>

<input type="button" id="btn" value="Check" onclick="check()" />

</body>

Issue #2.

Scroll bars added unnecessarily when parent div and svg width/height are same and overflow is set as “auto”

The parent div width and height value must be 300, 200. But IE10 gives 283, 183.

Expected Results:

==============

parent div’s scrollWidth and scrollHeight values must be exact correct value.

scroll bar shouldn’t be added unnecessarily.

Actual Results:

==============

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Jonathan H.”

      Changed Status to “Confirmed”

      Changed Steps to Reproduce

      Changed Assigned To from “Jonathan H.” to “IPBS P.”

      Changed Status from “Confirmed” to “Duplicate”

      Changed Assigned To from “IPBS P.” to “Rossen A.”

      Changed Steps to Reproduce

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

    Sign in