如何在Textarea元素中设置填充（背景图片错误）

Question

Goal: In the current demo, theres a padding between the last word in the textarea field and the bottom border (the bottom border is realized through a "background" property).

Demo: https://jsfiddle.net/7vaf1th8/336/

Thats how it looks like (And its correct, thats exactly what I want!):

In Webinspector:

Problem: As soon as I focus into the textarea, hit Enter and type some characters in, the characters are far too low near the bottom border (because the padding-bottom gets ignored), it looks like this (Which is wrong):

In Webinspector:

I've tried to set a calc(100%+7px) background position, to keep the space / padding between the bottom border and the characters, but no attempt was successful.

How can I remain the padding / space between the text and the bottom border while typing? (without disregarding/loosing/deleting the "background" property (border on the bottom), because I need it?)

Answer 1

in the .form-group .form-control you can change the padding to 0px and it will remove that extra: https://jsfiddle.net/7vaf1th8/349/

.form-group .form-control {
  margin-bottom: 7px;
  border: 0;
  background-image: linear-gradient(#66bb6a, #66bb6a), linear-gradient(rgba(165, 181, 203, .5), rgba(165, 181, 203, .5));
  background-size: 0 2px, 100% 1px;
  background-repeat: no-repeat;
  background-position: center bottom, center calc(100%);
  background-color: transparent;
  transition: background 0s ease-out;
  float: none;
  box-shadow: none;
  border-radius: 0;
  resize: none;
  margin-top: 7px;
  padding-top: 0 !important;
  height: auto;
  padding: 0px 0;
  width: 100%;
  color: #555;
  display: block;
}

Answer 2

I've fixed it on my own now. Ive created a parent class for the parent element, changed the background propertys to this parent element and deleted it on the child(textarea) element.

Now the padding works as expected.

Note: It seems to be a fact, after reading similar questions, that padding is not working in webkit on textareas "as expected". It doesnt seem to be a bug, just the way webkit handles padding when the scrollbar starts to appear on the textarea.