Most browsers

All the browsers render textarea padding like chrome: (pic below)

Firefox inconsistency

But firefox renders it like this for some reason?? (pic below... see how the padding cuts off the words when they overflow)

If anyone has some information on why this happens / a good fix please share! Thanks!

Oh, and here's the code from screenshots: codepen

textarea {
  display: block;
  overflow: auto;
  border: 0;
  outline: 0;
  resize: none;

  height: 230px;
  width: 500px;
  background: #ddd;

  padding: 50px; /* here's where it get's weird */
  margin: 20px;
}