CSS all initial breaks firefox newline in textareas

Question

Newline in textareas doesn't work in firefox when all: initial is set ...

https://jsfiddle.net/2bhzxdmg/

A idea how to resolve this (And I mean not be don't using the all: initial ... that is obvious)?

textarea {
  all: initial;
  background: #fff;
  padding: 10px;
  border: solid 1px #ddd;
}

<textarea></textarea>

Answer 1

You can solve it by adding white-space: pre-wrap:

Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks. (Source: W3schools)

The white-space is not preserved in Firefox because of the difference in initial user agent styles for textarea.

See demo below:

document.getElementById('sub').addEventListener('click', function() {
  console.log(document.getElementById('text').value);
})

textarea {
  all: initial;
  white-space: pre-wrap;
  background: #fff;
  padding: 10px;
  border: solid 1px #ddd;
}

<textarea id="text"></textarea>
<button id="sub">Get</button>

Answer 2

Use the browser's inspect tools to see what the default styles are without all:initial.
The default white-space property for a textarea turns out to be pre-wrap. So, that's the solution.

textarea {
  all: initial;
  background: #fff;
  padding: 10px;
  border: solid 1px #ddd;
  white-space: pre-wrap;  /* here you go. */
}

<textarea></textarea>