Steps to reproduce
Edge incorrectly renders whitespace in its
For example, in this CodePen the
text element with
text-anchor="end" renders ≈20px too far to the left. Its right side should align with the vertical line, as it does in other browsers.
If you remove the extra whitespace, Edge renders the text position correctly.
This is an issue in Edge 14+ (as far back as I can test in Browserstack).
- ❌ #EdgeBug whitespace causes incorrect text-anchor position
- ✅ #EdgeBug workaround, remove extra whitespace
According to the SVG spec, leading and trailing space characters should be stripped from the
text element’s character data.
Currently, Edge is the only major browser showing this bug. Below are screenshots of the following browsers:
- ⚠️ Edge 14+
- ✅ Chrome 62+
- ✅ Firefox 57+
- ✅ Safari 11+
- ✅ Opera 49+
This was originally posted in Issue #107591: text-anchor of middle or end not cooperating with dx values/107591/
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Steven K.”
Changed Assigned To to “bbrinza”