SVG Text not rendered correctly if styles changes

Issue #7152164 • Assigned to Bogdan B.

Details

Author
Michael W.
Created
Apr 8, 2016
Privacy
This issue is public.
Reports
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce

See this codepen

  1. Open Edge 25 to the codepen above.
  2. Scroll down and hover your mouse over the 3 lines of text. (a :hover css rule will be applied adding an underline)
  3. Note how the text-anchor setting (middle) seems to be lost and the text appears to jump to the left.
    We see other issues like this as well where we programatically change classes on SVG elements and they appear to misalign - but those are difficult to recreate in a simple demo page.
    All of this does not happen on a machine that still has Edge v20 installed.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Bogdan B.”

      Changed Assigned To from “Bogdan B.” to “Ibrahim O.”

      Changed Assigned To to “Bogdan B.”

    • A workaround is to duplicate the text-anchor assignment in the :hover css
      #myid:hover {
      text-decoration: underline;
      text-anchor: middle;
      }
      But why is this necessary?

    • Still an issue on Anniversary Edition Windows 10.

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

    Sign in