msg textarea formating for Firefox

[No one]

The chat box looks and behaves weird to say the least. Comparing Chrome to Firefox:

 

 

Spoiler

This is how it looks in Firefox when opening the page:

This is how it looks in Firefox when witing in it :

This is how it looks in Chrome when opening the page:

This is how it looks when witing in Chrome in it

 

It is ugly as s**t, here is a proposal:

Instead of :

<textarea rows="1" cols="30" autocomplete="off" name="msg" class="frm-input-msg" id="msg" style="width:82%; word-break: break-all; resize: none; overflow:" maxlength="200" placeholder="Type your spells or message here..." wrap="hard"></textarea>

use this:

<textarea oninput="this.style.height = '5px'; this.style.height=(this.scrollHeight + 2)+'px'" rows="4" cols="30" autocomplete="off" name="msg" class="frm-input-msg" id="msg" style="width: 82%; word-break: break-all; resize: none; overflow: hidden; height: 19px;" maxlength="200" placeholder="Type your spells or message here..." onload="this.style.height = '5px'; this.style.height=(this.scrollHeight)+'px'" wrap="hard"></textarea>

And the outcome would be :

 

Spoiler

In Firefox with proposed code at load time (hopefully as it can't be 100% at load), already looking smoother:

In Chrome with proposed code at load time (hopefully as it can't be 100% at load), it looks identical:

And when writing in it in Firefox :

And in Chrome :

 

I hope you can test it in Safari as well, but at least it would improve on these 2 browsers