Closed Bug 1696885 Opened 3 years ago Closed 3 years ago

Textarea bottom padding is not rendered in Firefox 87


(Core :: Layout, defect)

Firefox 87



89 Branch
Tracking Status
firefox89 --- fixed


(Reporter: jakub.liput, Assigned: TYLin)


(Regressed 1 open bug)



(4 files)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:86.0) Gecko/20100101 Firefox/86.0

Steps to reproduce:

In Firefox 87.x render this HTML:
I noticed this bug first time in Firefox Developer Edition 87.0b6

Actual results:

Bottom padding of textarea set in CSS is not rendered.

Expected results:

The text in textarea should have a padding on the bottom.
It was rendered in 86.0 (stable channel) differently than in Chromium, which renders padding when content is scrolled, but in 87 the padding is not rendered at all.

Component: Untriaged → Layout
Product: Firefox → Core
Attached image ff87-scroll-top.png

Firefox 87.0b7 - textarea with top/bottom padding, scrolled to top - looks good

Attached image ff87-scroll-bottom.png

Textarea in Firefox 87.0b7 with top and bottom padding, scrolled to bottom - should have a bottom padding, but it doesn't

HTML source for above screenshots (in case of problems with Jsbin):

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
    textarea {
      width: 100px;
      height: 100px;
      padding-top: 20px;
      padding-bottom: 20px;
  <textarea>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates non animi nostrum totam, reiciendis libero tempore reprehenderit quisquam labore iusto ab, velit asperiores natus ad, doloribus sequi voluptatem ipsa aperiam!</textarea>
Attachment #9207732 - Attachment mime type: text/plain → text/html

This was an intentional change from bug 1456052, see that and bug 1099204 for the issues it caused. It behaves the same as any other scroller now:

<div style="overflow: scroll; width: 100px; height: 100px; padding: 10px;"><div style="height: 300px; background: blue">

Whether that scroller should actually respect the padding-bottom is a long-standing spec issue and discussion, see all the story in bug 748518.

Closed: 3 years ago
Resolution: --- → DUPLICATE

Thanks for your reply and links!
So now I'm looking forward for resolving the padding-bottom issue, because it makes styling incompatible between Firefox and Chromium 😬

I reopen this bug to track the progress to add block-end padding to <textarea>.

I'm working on adding block-end padding to block container in bug 1527949, but that's not enough to fix this bug. We have overflow-clip-box: padding-box content-box; for <textarea>, and we have existing bugs that can mess up with overflow areas.


Depends on: 1527949
Ever confirmed: true
Resolution: DUPLICATE → ---

Marking as S3 to take it out of the untriaged list; would be good to try and make progress here for better compatibility, but it's evidently a longstanding issue.

Severity: -- → S3

This testcase is fixed by bug 1527949.

Depends on D109424

Assignee: nobody → aethanyc
Attachment #9210942 - Attachment description: Bug 1696885 - Add a wpt test for textarea's overflow areas. → Bug 1696885 - Fix block-end padding missing for scrollable <textarea>.
Pushed by
Fix block-end padding missing for scrollable <textarea>. r=emilio
Created web-platform-tests PR for changes under testing/web-platform/tests
Closed: 3 years ago3 years ago
Resolution: --- → FIXED
Target Milestone: --- → 89 Branch
Upstream PR merged by moz-wptsync-bot
Blocks: 1702162
Regressions: 1715291
You need to log in before you can comment on or make changes to this bug.