TextArea or DIV not wrapping content correctly

Confirmed Issue #12328084 • Assigned to Francois R.

Details

Author
Ryan G.
Created
Jun 13, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
13.10586
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

My web application requires calculating the pixel positioning of selected text within a TextArea element. I am creating a temporary div, copying the value of the TextArea and inserting it as a text node into the div, then copying all the computed styles from the TextArea to the div and using the div to make my calculations. In all of the main browsers I have tried this with (Chrome, FireFox, Safari, IE11), the content is rendered/wrapped identically between the two elements. In Edge, however, the content is wrapped at differing positions.

Logging each of the styles, and calculated dimensions, I see that Edge reports that everything is the same between the two (even though there seems to be about a 4px difference in padding-right between them, based on where it wraps – this is not visible, but if I manually change the padding-right on the div to be 4px higher than the TextArea element, they line up). I am attaching an html file where this can be seen. Note in the first paragraph, the lorem ipsum text does not line up (the two elements are stacked on top of each other for ease of seeing this issue).

Whether this is an issue with the DIV or with the TextArea, I have no idea, but they should be rendered in the same way when all styles are equal.

Attachments

1 attachment

Comments and activity

  • After further inspection and tinkering, it seems that the white-space property of the textarea does not work as expected. When changing word-wrap to “normal” (vs “break-word”), I was unable to reproduce any issues, but when reverting to word-wrap: break-word, the issue re-appeared.

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

    Changed Assigned To to “Bogdan B.”

    Changed Assigned To from “Bogdan B.” to “Francois R.”

    Changed Status to “Confirmed”

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

Sign in