Highlight issue in youtube's search box due to YouTube setting a too-small line-height

VERIFIED FIXED in Firefox 6

Status

()

Core
Layout: Form Controls
P1
normal
VERIFIED FIXED
6 years ago
6 years ago

People

(Reporter: simonab, Assigned: bz)

Tracking

({regression})

Trunk
mozilla6
regression
Points:
---

Firefox Tracking Flags

(firefox6+ fixed)

Details

(Whiteboard: bz nominated at comment 3)

Attachments

(4 attachments)

(Reporter)

Description

6 years ago
Created attachment 534401 [details]
Screenshot of the issue

Mozilla/5.0 (Windows NT 5.1; rv:6.0a1) Gecko/20110522 Firefox/6.0a1

The highlight of the search box on http://www.youtube.com/ is smaller than the text box.

Reproducible: always

STR:
1. Navigate to: http://www.youtube.com/
2. Start typing in the search box

Actual results:
When the search box is focused a weird highlight appears.

Expected results:
The highlight of the search box while is on focus should be as big as the text box.

Comment 1

6 years ago
Reproducible also on:

-> Windows7:
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0a1) Gecko/20110522 Firefox/6.0a1

-> Mac OS 10.6:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:6.0a1) Gecko/20110522 Firefox/6.0a1

-> Linux i686
Mozilla/5.0 (X11; Linux i686; rv:6.0a1) Gecko/20110522 Firefox/6.0a1

*Note: Changing platform to ALL
OS: Windows XP → All

Comment 2

6 years ago
Regression window(cached m-c hourly):
Works
http://hg.mozilla.org/mozilla-central/rev/92d5e760e0c0
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0a1) Gecko/20110505 Firefox/6.0a1 ID:20110505082945
Fails:
http://hg.mozilla.org/mozilla-central/rev/0591c3a2b297
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0a1) Gecko/20110505 Firefox/6.0a1 ID:20110505093012
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=92d5e760e0c0&tochange=0591c3a2b297
Suspected bug:
e5668cb2a02f	Boris Zbarsky — Bug 349259. Allow pages to override line-height on form controls, except for <select>. r=dbaron
Component: General → Layout: Form Controls
Keywords: regression
Product: Firefox → Core
QA Contact: general → layout.form-controls
Hardware: x86 → All

Updated

6 years ago
Blocks: 349259
YouTube is basically depending on the fact that IE, WebKit and Opera (and old Gecko) won't let line-height reduce the height of an <input>, and using padding on the <input> to work around the IE issues with text being cut off.
Created attachment 534429 [details]
Minimal testcase based on the YouTube markup when the input is focused

Note that 12 + 2 + 2 + 2 + 3 == 21, but the label height is set to 23.  So this CSS is assuming that the content height of the input will actually be 14px, in spite of the 12px line-height setting.
Summary: Highligt issue in youtube's search box → Highlight issue in youtube's search box due to YouTube setting a too-small line-height
tracking-firefox6: --- → ?
I've contacted Google for now; let's see what they say.  The question is how isolated an incident this is and whether we should just back out bug 349259.
Assignee: nobody → bzbarsky

Comment 6

6 years ago
Created attachment 534434 [details]
Password hidden ● top is cut off

[STR]
1. Go http://www.sony.jp/
2. Click "My Sony Club" at the top-right
3. Click "ログイン" at the top-right
4. Input a text in password field

This does not happen before landing the Bug 349259 .
Yep, looks like sony.jp is setting "line-height: 1em" and using top/bottom padding to prevent stuff from being cut off in IE.  That _might_ start to work if we fix bug 634649.  Maybe.
Created attachment 534451 [details] [diff] [review]
Go back to not allowing changes to line-height on inputs (but continue to allowing it for <button>s, for site compat reasons.
Attachment #534451 - Flags: review?(dbaron)
Priority: -- → P1
http://hg.mozilla.org/mozilla-central/rev/b97aef275b5e
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla6
Comment on attachment 534451 [details] [diff] [review]
Go back to not allowing changes to line-height on inputs (but continue to allowing it for <button>s, for site compat reasons.

r=dbaron
Attachment #534451 - Flags: review?(dbaron) → review+

Updated

6 years ago
Whiteboard: bz nominated at comment 3

Comment 11

6 years ago
please nominate the attachment with a risk analysis.
tracking-firefox6: ? → +
There's no need to nominate; this was fixed for 6.
status-firefox6: --- → fixed
(Reporter)

Comment 13

6 years ago
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:8.0a1) Gecko/20110708 Firefox/8.0a1

Verified issue using the STR to reproduce from Comment 0 on WinXP, Win7, Ubuntu 10.10 and MacOS x 10.6.

Setting resolution to VERIFIED FIXED.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.