Closed Bug 525897 Opened 15 years ago Closed 8 years ago

The content of Text-field is not centered vertically

Categories

(Core :: Layout: Form Controls, defect)

1.9.2 Branch
defect
Not set
trivial

Tracking

()

RESOLVED WORKSFORME

People

(Reporter: mehmet.sahin, Assigned: karlt)

References

()

Details

(Keywords: regression)

Attachments

(3 files)

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
Attached image Bug example
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.
Component: General → Layout: Text
OS: Mac OS X → All
Product: Firefox → Core
QA Contact: general → layout.fonts-and-text
Hardware: x86 → All
Version: unspecified → 1.9.2 Branch
verified by regression range mentioned in Bug 494126 comment 3.
Status: UNCONFIRMED → RESOLVED
Closed: 14 years ago
Component: Layout: Text → Layout: Form Controls
QA Contact: layout.fonts-and-text → layout.form-controls
Resolution: --- → DUPLICATE
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?
Assignee: nobody → karlt
Blocks: 481751
Status: RESOLVED → UNCONFIRMED
Flags: wanted1.9.2?
Resolution: DUPLICATE → ---
Status: UNCONFIRMED → NEW
Ever confirmed: true
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;
}
(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.
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.)
(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.
(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.
philippe, does a minimal testcase using those styles show the problem in Gecko?  What about Webkit?
(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.
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).
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.
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.
Can someone file the appropriate bug against Webkit, if there isn't a good one already?
(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.
Flags: wanted1.9.2? → wanted1.9.2-
Via duped bug 539013 I noticed that the main search field at bing.com is also affected (same issue: different top/bottom padding).
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
Closing this bug as works for me. If anyone can still reproduce this, please reopen the bug and add some information. Thanks.
Status: NEW → RESOLVED
Closed: 14 years ago8 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.