4

I have a textarea within a parent div. The parent div has 'white-space: nowrap'. Should the textarea be inheriting the 'white-space: nowrap'? In IE11 the textarea inherits the 'nowrap'. Chrome ignores the inherited 'nowrap' and instead uses 'white-space: pre-wrap' from the user agent stylesheet. I know I can fix this by explicitly specifying the textarea's white-space property. Should I have to set the whitespace of the textarea explicitly, or is this an IE11 bug?

The following JSFiddle demonstrates the issue. (Open it in IE11 and Chrome and note the difference).

http://jsfiddle.net/sTAB3/1/

Here is the code in the JSFiddle:

.a {
    white-space: nowrap;
}

<div class="a">
  <textarea id="log" rows="20" cols="50">If I may... Um, I'll tell you the problem with the scientific power that you're using here, it didn't require any discipline to attain it. You read what others had done and you took the next step. You didn't earn the knowledge for yourselves, so you don't take any responsibility for it. You stood on the shoulders of geniuses to accomplish something as fast as you could, and before you even knew what you had, you patented it, and packaged it, and slapped it on a plastic lunchbox, and now you're selling it</textarea>
</div>
pulekies
  • 894
  • 2
  • 10
  • 20
  • I still have IE 9 and it looks the same as chrome, in case that helps anyone. My guess is Microsoft decided it was working too well and "fixed" it in the newer version. – JStephen Jul 11 '14 at 22:06
  • 1
    It's not technically am IE11 bug, since there's [no spec that mandates behaviour](http://www.w3.org/html/wg/drafts/html/master/rendering.html#rendering) here. However, [section 10.5.16 of the HTML 5.1 spec](http://www.w3.org/html/wg/drafts/html/master/rendering.html#the-textarea-element-0) says that textarea elements should have `white-space: pre-wrap;` applied (which would take priority over default inheritance) *if* IE11 claimed to [support the default rendering](http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#renderingUA) – Alohci Jul 12 '14 at 00:33

1 Answers1

0

This appears to be an IE 11 bug that allows the white-space property of a parent element to be inherited by a child textarea. This should be considered as unexpected behaviour.

I would apply white-space: pre-wrap to the textarea and treat it as an IE 11 bugfix.

I cannot find an official bug report (sources welcomed), but below are two examples of problems arising from this bug.

Example 1

Example source

From the link:

Ticket description textarea doesn't wrap on whitespace in IE11

enter image description here

Example 2

Example source

Internet Explorer 11 word wrap is not working It seems that word wrapping no longer works for textarea elements in IE 11. In IE 10 and earlier, FF, Safari, and Chrome word wrapping works as expected.

Community
  • 1
  • 1
misterManSam
  • 24,303
  • 11
  • 69
  • 89