absolute positioned text area does not respect right and bottom properties

Question

I am trying to absolute position a text area that will stretch to cover it's parent. Unfortunately Chrome seems to ignore right property and Firefox ignores both right and bottom properties.

Here is the CSS I am using :

#container {
  position: relative;
}
#my-text-area {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 10px;
  right: 10px;
}

Here is a JsFiddle example :enter link description here

Is there a textarea default property that i have to disable or are these just bugs? There are workarounds to achieve the full width and height of the parent by inheriting these properties from the parent but i am looking for a way to make the absolute positioning for the scenario you would in the future have custom right and bottom not only 0.

Answer 1

Wrap the textarea in an element and use same css on that element. Demo: https://jsfiddle.net/lotusgodkk/csub6b96/2/

HTML:

<div id="container">
    <div id="my-text-area">

        <textarea></textarea>
    </div>

</div>

CSS:

body,
html,
#container {
    width: 100%;
    height: 100%;
}

body {
    margin: 0px;
}

#container {
    position: relative;
}

#my-text-area {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

textarea {
    height: 100%;
    width: 100%;
}

Reference: http://snook.ca/archives/html_and_css/absolute-position-textarea

If you're interested in why this is required, it's because the browsers affected are those which render textarea as a replaced element. Rendering this control is delegated to the OS, and not handled by the browser itself, and it appears that certain CSS properties aren't respected when rendering a replaced element with position: absolute. The relevant (and complicated) section of the CSS spec is https://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width