Textarea padding inconsistency in Firefox and Chrome

Question

I have a padding on my textarea element and I would like the content to remain padded as you scroll within the textarea. It is working as expected in Firefox but not in Chrome.

Answer 1

Try the below solution for the textarea

textarea {
   -moz-appearance: textfield;
   -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
   -moz-user-select: text;
   background-color: -moz-field;
   border: 2px inset threedface;
   color: -moz-fieldtext;
   cursor: text;
   font: -moz-field;
   width:250px;
   height:150px;
   letter-spacing: normal;
   line-height: normal !important;
   padding: 1px 0;
   text-align: start;
   text-indent: 0;
   text-rendering: optimizelegibility;
   text-shadow: none;
   text-transform: none;
   word-spacing: normal;
 }

Fiddle link Link

Regards Mahadevan