SVG animation cause hyphens and bullet points within the SVG to behave strangly

Duplicate Issue #9726389 • See Issue #9571247

Details

Created
Nov 9, 2016
Privacy
This issue is public.
Duplicates
See progress on Bug #9571247
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

We have an animation within an SVG on our site. It contains a clickable area which causes a shape to move and resize. The SVG contains several text sections which contain a few hyphens and bullet points. For some reason, when the animation starts, all of the hyphens and bullet points suffer a problem with spacing. The bullet points gain several points of space on either side, making the text beside them shift slightly to the right. The hyphens suffer a much worse problem. They all shift to the right by several word lengths. This totally breaks our layout. This problem only happens with Edge. All other browsers render our SVG correctly. We also notice that, when we highlight the words after the animation, the selection area appears very blocky, and the words shift around as the selection area enlarges.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Ibrahim O.”

    • Thank you for your feedback. Could you please provide sample code or reduced repro sample, this will help us investigate the issue.

      All the best,
      The MS Edge Team

    • Microsoft Edge Team

      Changed Status to “Not reproducible”

    • Thank you for the report. Can you please provide a repro case we can investigate? This is not actionable in the current state

    • I believe this is a repro that matches the description: http://jsfiddle.net/hk9wrf89/19/

    • Microsoft Edge Team

      Changed Status from “Not reproducible”

      Changed Assigned To to “Bogdan B.”

      Changed Status to “Duplicate”

    • Thanks for your report. Duping to an internal bug.

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

    Sign in