525897 - The content of Text-field is not centered vertically

Status: RESOLVED WORKSFORME

(Core :: Layout: Form Controls, defect)

Description

[Mehmet]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2b2pre) Gecko/20091102 Namoroka/3.6b2pre
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2b2pre) Gecko/20091102 Namoroka/3.6b2pre

Hello Firefox-Team,

in some sites like www.youtube.com or www.apple.com the content of the search(-text)-field is not centered vertically.

This happens to FF 3.6 and FF 3.7

Thanks and regards
Mehmet

Reproducible: Always

Steps to Reproduce:
1. go to www.youtube.com or www.apple.com
2. click into the search-(text)-field on these sites
3.
Actual Results:  
the content of the text-field is not centered vertically

Expected Results:  
the content of the text-field should be centered vertically like in FF 3.5.x

Comment 1

[Mehmet]

Attachment: Bug example

Comment 2

[Ria Klaassen (not reading all bugmail)]

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.3a1pre) Gecko/20091102 Minefield/3.7a1pre

The text is indeed one pixel lower.

Comment 3

[(mostly gone) XtC4UaLL [:xtc4uall]]

verified by regression range mentioned in Bug 494126 comment 3.

Comment 4

[Boris Zbarsky [:bzbarsky]]

This is a totally different issue from bug 494126, though likely caused by the same patch.  In that bug, the "centering" is wrt some random background.  In this bug, it's wrt the input itself, and we should be getting this right.

karlt, can you look into this, please?

Comment 5

[philippe (part-time)]

One could argue that Gecko does what it is instructed to do, at least on the youtube page:

#masthead .search-term {
border-color:#666666;
margin-bottom:1px;
margin-top:1px;
padding-left:2px;
padding-right:2px;
}

#masthead .search-term {
border:1px solid #999999;
font-size:100% !important;
height:1.38462em;
padding:4px 1px 1px; /* <---------------- */
vertical-align:top;
width:25em;
}

Comment 6

[Karl Tomlinson (:karlt)]

(In reply to comment #0)
> This happens to FF 3.6 and FF 3.7

(In reply to comment #4)
> This is a totally different issue from bug 494126, though likely caused by the
> same patch.

Bug 481751 didn't land on 1.9.1 (for 3.6).  A similar patch landed on 1.9.1 for bug 453827 but should take effect only for the urlbar.

Comment 7

[Karl Tomlinson (:karlt)]

Though, with 3.6 on Linux, I'm seeing behavior similar to the top screenshot in attachment 409711 [details].  (With m-c on Linux, I see behavior similar to the bottom screenshot, centering text wrt the content box, as philippe points out.)

Comment 8

[philippe (part-time)]

(In reply to comment #6)
> Bug 481751 didn't land on 1.9.1 (for 3.6). 
Firefox 3.6 is on Gecko 1.9.2, which has the patch from bug 481751, afaik.

---
For Apple com, same issue basically:
#globalsearch .search-wrapper input.g-prettysearch {
border:0 none;
font:11px "Lucida Grande",Arial,sans-serif;
margin:0;
padding:3px 0 0; /* <------------ */
position:absolute;
right:10px;
top:0;
width:110px;
}

----
Opera 10 and 10.5 show exactly the same problem, fwiw (tested on OS X 10.6.2). WebKit on apple.com uses input[type="search"] and is not affected by the above styles. I'm a bit unclear what WebKit does differently on youtube.com. As far as I can see, it is served exactly the same styles as Gecko.

Comment 9

[Karl Tomlinson (:karlt)]

(In reply to comment #8)
> Firefox 3.6 is on Gecko 1.9.2, which has the patch from bug 481751, afaik.

Sorry, you are right, of course.  Please disregard my comment 6 and 7.

Comment 10

[Boris Zbarsky [:bzbarsky]]

philippe, does a minimal testcase using those styles show the problem in Gecko?  What about Webkit?

Comment 11

[philippe (part-time)]

Attachment: testcase, reduction from Youtube.com

(In reply to comment #10)
> philippe, does a minimal testcase using those styles show the problem in Gecko?
>  What about Webkit?

Boris, here is a minimal test case - reduced from YT. WebKit doesn't show the issue. Screenshot follows.

Comment 12

[philippe (part-time)]

Attachment: screenshot from testcase

WebKit (latest nighty) on the left, Minefield latest on the right
OS X 10.6.2 (10.5.8 displays the same, Safari 4.04 release build does the same).

Comment 13

[Boris Zbarsky [:bzbarsky]]

Ah, this looks like a bug in webkit to me.  Setting the top padding to 400px still makes Safari center the text in the control (so basically just using the padding for overall sizing)...

I'll try to look into what IE does.

Comment 14

[Boris Zbarsky [:bzbarsky]]

IE has the same behavior as Gecko.  So does Opera.  Sounds to me like just a Webkit bug that the sites are (unconsciously?) relying on.

Comment 15

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Can someone file the appropriate bug against Webkit, if there isn't a good one already?

Comment 16

[philippe (part-time)]

(In reply to comment #15)
> Can someone file the appropriate bug against Webkit, if there isn't a good one
> already?
I'm looking for one. If not I'll file a new one.

Comment 17

[philippe (part-time)]

WebKit Bug filed
https://bugs.webkit.org/show_bug.cgi?id=32981

Comment 19

[philippe (part-time)]

Via duped bug 539013 I noticed that the main search field at bing.com is also affected (same issue: different top/bottom padding).

Comment 20

[Abe - QA (:Abe_LV)]

Not reproducible in the latest nightly and Firefox 45.0.1. The texts in youtube.com search box are vertically centered. 

--
Version 	48.0a1
Build ID 	20160404030231
Update Channel 	nightly
User Agent 	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:48.0) Gecko/20100101 Firefox/48.0

Comment 21

[Abe - QA (:Abe_LV)]

Closing this bug as works for me. If anyone can still reproduce this, please reopen the bug and add some information. Thanks.