Bug textarea with padding in Firefox

Asked

Viewed 185 times

4

The padding-bottom in a <textarea>, works normally on Google Chrome and in other browsers when scrolling the scrollbar, but in Firefox the spacing is always "fixed" and the texts appear cut.

Difference in Opera (based on Chromium) and Firefox:

Diferença entre Opera e Firefox

The problem only occurs in Firefox, other browsers work normally. The bug is listed in Bugzilla https://bugzilla.mozilla.org/show_bug.cgi?id=1099204

I would like to know if it is possible to get around this? For example to exchange the padding for something else.

Example of the problem:

.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>

1 answer

9

Actually, the padding all right bugle in Firefox. Once I also had a problem, but I opened a call on Bugzilla and was very fast the correction.

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

In that case, 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>

  • Excellent suggestion, I will try to implement, however it can be a headache for those who need simple texts, would have to put a filter in the input events and Paste. But it’s a great idea yet, if nothing else comes along I’ll choose your suggestion :)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.