SVG bug: scaled text has wrong bounding rect

Issue #6182067 • Assigned to Bogdan B.

Details

Created
Jan 14, 2016
Privacy
This issue is public.
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

URL: https://ecommerces.microdinc.com/OmniPlanner.aspx?debug=true

This is a regression, first introduced after upgrading from TH1 to TH2.

Repro Steps:

Access the https://ecommerces.microdinc.com/OmniPlanner.aspx?debug=true url
A ‘Select Desired Room Shape’ dialog will appear after page load.
Select a room shape, select Next
Select Finish

Expected Results:

The selected room shape and dimensions appear in the grid, text for dimensions are outside of the wall lines and the associated rect are not visible (see ProductionCompareExample.png)

Actual Results:

The selected room shape and dimensions appear
The dimensions text selectable rect box overlaps the wall lines. (See ProductionCompareExample.png)

Simplified Repro Steps:

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

Create a simple HTML page and add the following SVG code to the body (sample and screenshots attached):

   

<
svg

width
="800"

height
="400">

       

<
g

transform
="scale(0.2)">

           

<
text

font-size
="140px"

x
="200"

y
="500">
SCALED
1
</
text

           

<
text

font-size
="140px"

x
="500"

y
="1000">
SCALED
2
</
text

       

</
g

       

<
text

font-size
="14px"

x
="700"

y
="50">
NORM
X
</
text

   

</
svg

Load the resulting page into Edge.
Symptom 1:
(Does reproduce on build 14342.rs1_release.160506.1708)
Double-click on “SCALED 1” or “SCALED 2”

Expected Results:

Only ‘SCALED’ is highlighted, leaving the number outside of the selected text

Actual Results:

The selection runs past ‘SCALED’ and overlaps the area where the number is (blue selection box overlaps the number, making the numbers invisible)

Symptom 2:
(does not repro on build 14342.rs1_release.160506-1708)
Triple-click on “SCALED 1” or “SCALED 2”

Expected Results:

Only SCALED 1 or SCALED 2 text is selected

Actual Results:

Large rectangle well above and beyond the text is selected

Symptom 3:
 (does not reproduce on build 14342.rs1_release.160506.1708)
Double-click and then single click on “SCALED 1” or “SCALED 2”

Expected Results:

Just the text is selected, no overly large selection box is visible, no ghost or duplicate text is visible.

Actual Results:

Big selection box, the number is visible on two places

Symptom 4:
(Does reproduce on build 14342.rs1_release.160506.1708)
Ctrl-A: big selection boxes for “SCALED 1” and “SCALED 2”

Expected Results:

Only the text is selected. No overlapping selection boxes, no text obscured.

Actual Results:

All text is selected, SCALED 1 and SCALED 2, the selection ‘boxes’ are larger than expected and overlap, (SCALED 2 selection box overlaps SCALED 1, obscuring part of SCALED 1 text.)

Workarounds:

Moving the transform from <g> to each of the grouped <text> elements does not reproduce any of the symptoms.

NOTES:
Size of the two big selection boxes depends on:

  • the other texts - try to delete the “NORM X” text.
  • the scale transform
  • font-size value

Microsoft Edge 25.10586.0.0
Microsoft EdgeHTML 13.10586
All other browsers including IE work as expected.

Dev Channel specific:

No

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Kamen M.”

      Changed Assigned To to “Bogdan B.”

      Changed Steps to Reproduce

      Changed Steps to Reproduce

    • Originally reported to Microsoft in Jan 2016 here: https://connect.microsoft.com/IE/Feedback/Details/2240792.

      This problem only affects Edge. Internet Explorer, Firefox, Chrome, all do it correctly. Edge is the only browser that struggles with this.

    • This issue occurs for several customers including Smithe.com, woodleys.com, and any other clients who use Edge and the room planner.

    • For convenience here is the broken document in a fiddle to play with: http://jsfiddle.net/a5zcjfyw/

      Also try selecting a few characters using mouse drag gesture on SCALED 1 and SCALE 2 and watch the rendering of the selection box and text break completely.

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

    Sign in