Changing the line-height of ::-moz-placeholder affects the vertical alignment of its text

UNCONFIRMED
Unassigned

Status

()

Core
Layout: Form Controls
UNCONFIRMED
3 years ago
3 years ago

People

(Reporter: John, Unassigned)

Tracking

({testcase})

Trunk
x86_64
Windows 8.1
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(4 attachments)

(Reporter)

Description

3 years ago
Created attachment 8490949 [details]
screen shot of bug in Firefox 32.01 on Windows 8.1

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36

Steps to reproduce:

I applied styling for the line-height property using the ::-moz-placeholder selector on an input element which had a height greater than the default height for an input element.

Bug reproduces in the following codepen:
http://codepen.io/anon/pen/sJEHm


Actual results:

The placeholder text became miss-aligned, the text was appeared to be aligned with as if the input element height was still it's default height.


Expected results:

The placeholder text should be vertically middle aligned.
(Reporter)

Updated

3 years ago
Keywords: css-moz, css3, html5
(Reporter)

Updated

3 years ago
Summary: styling text-height using ::-moz-placeholder ignores the vertical alignment of text → styling line-height using ::-moz-placeholder ignores the vertical alignment of text
(Reporter)

Comment 1

3 years ago
Reading that Firefox ignores line-height on an input element, I recommend doing the same when styling placeholder text.

link:
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
(Reporter)

Comment 2

3 years ago
Created attachment 8490967 [details]
screen shot of bug in Chrome 37 on Windows 8.1
(Reporter)

Comment 3

3 years ago
Created attachment 8490968 [details]
screen shot styling in IE 11 on Windows 8.1

Updated

3 years ago
Component: Untriaged → Layout: Form Controls
Keywords: css-moz, css3, html5 → testcase
Product: Firefox → Core
(Reporter)

Updated

3 years ago
Component: Layout: Form Controls → CSS Parsing and Computation
(Reporter)

Updated

3 years ago
Component: CSS Parsing and Computation → Layout: Form Controls
(Reporter)

Updated

3 years ago
(Reporter)

Updated

3 years ago
Alias: placeholder-line-hei
(Reporter)

Updated

3 years ago
Alias: placeholder-line-hei
(Reporter)

Updated

3 years ago
(Reporter)

Comment 4

3 years ago
Created attachment 8491109 [details]
HTML with bug reproducing

Comment 5

3 years ago
Regression range:
good=2012-11-09
bad=2012-11-10
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=90cea19e27e2&tochange=a47525b93528

My guess goes to bug 737786.

It looks like an old issue, surely already reported.
Keywords: regression
Whiteboard: DUPEME
This is the expected behavior given the styles in the testcase.

The input has an anonymous block inside which has a line height set to the input height.  This is done to vertically center the text.  The testcase is not changing this line height, since it's not applying styles to this block.

The placeholder also has such a line height, but the testcase is explicitly overriding that style.  That means it's explicitly disabling the vertical centering.
Keywords: regression
Whiteboard: DUPEME
Note that webkit's placeholder implementation is different in all sorts of ways.  In particular, changing its line-height doesn't change its height (but does change the vertical alignment of the text inside the placeholder box!), styling its height also doesn't change its height, and the actual placeholder block is always vertically centered on the input.

I personally don't think we should be making random changes here until this is standardized.
Summary: styling line-height using ::-moz-placeholder ignores the vertical alignment of text → Changing the line-height of ::-moz-placeholder affects the vertical alignment of its text
You need to log in before you can comment on or make changes to this bug.