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

Status: VERIFIED FIXED

(Core :: Layout: Form Controls, defect, P1)

Description

[Simona Badau, Desktop QA, PTO 13-25aug]

Attachment: 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

[AndreiD[QA]]

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

Comment 2

[Alice0775 White]

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

Comment 3

[Boris Zbarsky [:bzbarsky]]

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.

Comment 4

[Boris Zbarsky [:bzbarsky]]

Attachment: 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.

Comment 5

[Boris Zbarsky [:bzbarsky]]

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.

Comment 6

[Alice0775 White]

Attachment: 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 .

Comment 7

[Boris Zbarsky [:bzbarsky]]

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.

Comment 8

[Boris Zbarsky [:bzbarsky]]

Attachment: Go back to not allowing changes to line-height on inputs (but continue to allowing it for <button>s, for site compat reasons.

Comment 9

[:Ms2ger (he/him; ⌚ UTC+1/+2)]

http://hg.mozilla.org/mozilla-central/rev/b97aef275b5e

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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

Comment 11

[Asa Dotzler [:asa]]

please nominate the attachment with a risk analysis.

Comment 12

[Boris Zbarsky [:bzbarsky]]

There's no need to nominate; this was fixed for 6.

Comment 13

[Simona Badau, Desktop QA, PTO 13-25aug]

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.

Comment 14

[y1n0]

Can we revert this b97aef275b5e now as YouTube has changed their input field?