Textarea resizes on focus and leave

Question

I have a problem that I've never seen before: a plain old regular html textarea that resizes on focus.

Even though I set the height of the desired area, it still resizes to something either smaller or larger with no obvious correlation. I've tried to remove all my classes on the item with no luck.

Is this is bootstrap thing?
and how do i fix it?

link to short video of the problem:
https://www.dropbox.com/s/7329y5a96ixajl4/18-34-46.wmv?dl=0

<textarea style="min-height: 150px; height: 150px; 
   max-width: 100%;" type="text" name="jobDesc" 
   ng-model="req.jobDesc" placeholder="Write a description for the assignment">
</textarea>

Answer 1

Try using rows Attribute:

<textarea rows="4" >
This should force the text area to only show 4 lines, or 5, as you desire. 
</textarea>

Anyway, I think you can check the size of your text area or the calculated properties, clicking on "inspect" on your browser (for example chrome). Then click on Styles/Computed and you will see the styles you are applying.

An image of the properties:

EDIT:

I´ve tried to make a fiddle to think about which property is breaking it, try it. It it seems you need to look for a textarea:focus or similar inside your css`s :)

Changed snippet to show how also padding property can affect the size

#editor1 {height: 10px;}
#editor1:focus {height: 20px;}

#editor2:focus { padding-bottom: 10px;}

<textarea id="editor1" placeholder="Check it!!"></textarea>
<textarea id="editor2" placeholder="Check it!!"></textarea>

Improved with comment from OP after solving:

I did actually manage to find out what caused the problem. Hidden in one of the js files was some legacy code to manage resizing of textareas. As some of the pages where loading in templates on top of the actual page(in a aside/modal) the code wasnt running correctly. Thank you for taking the time. It led me to my