Bug textarea with padding in Firefox

Navigation
4

padding-bottom in <textarea> , works normally in Google Chrome and other browsers when scrollbar scrolls, but in Firefox the spacing always stays "fixed" and texts are cut off.

Difference in Opera (based on Chromium) and Firefox:

TheproblemonlyoccursinFirefox,otherbrowsersworknormally.ThebugislistedinBugzilla link

I wonder if it's possible to get around this? For example changing the padding for something else.

Problem example: 

.foo {
    box-sizing: border-box;
    width: 400px;
    height: 200px;
    padding-bottom: 150px;  
}
<textarea class="foo">
Bacon ipsum dolor amet ground round cow chuck tail t-bone ribeye jowl
meatloaf ham turducken. Cupim boudin frankfurter pig, hamburger drumstick
beef ribs kielbasa pastrami tri-tip. Beef ribs turkey porchetta, pastrami ham
meatball sirloin frankfurter venison. Pastrami brisket chicken shoulder,
landjaeger chuck burgdoggen alcatra. Tongue shank boudin jerky chicken capicola
pork loin kevin burgdoggen tri-tip. Chicken meatloaf spare ribs bresaola,
bacon porchetta leberkas drumstick sausage.
</textarea>
    
asked by anonymous 18.08.2016 / 21:12

1 answer

9

Really, padding is well bugado in Firefox. I once also had a problem, but I ran a call on Bugzilla and it was pretty quick to fix it.

If it's so important to use padding , you can simulate textarea using contenteditable of HTML5, and from what I've seen, it's supported in all browsers (check out its compatibility here ).

So, do: 

.post {
  background-color: #FFF;
  border: 1px solid #e1e8ed;
  padding-bottom: 150px;
  border-radius: 6px;
  word-wrap: break-word;
}
<div class="post" contenteditable="true">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat
   tortor turpis, ut commodo nunc pretium tincidunt. Fusce tempus sed arcu 
   sed vestibulum. Phasellus pulvinar dui eu urna laoreet condimentum. 
   Phasellus vel mi auctor, convallis felis vitae, efficitur ipsum. Duis 
   eget lacus sed velit lacinia pharetra.
</div>
    
18.08.2016 / 21:43
How to subtract hours from a date in javascript? Capturing Enter in IE using jQuery