Last Comment Bug 658982 - Highlight issue in youtube's search box due to YouTube setting a too-small line-height
: Highlight issue in youtube's search box due to YouTube setting a too-small li...
Status: VERIFIED FIXED
bz nominated at comment 3
: regression
Product: Core
Classification: Components
Component: Layout: Form Controls (show other bugs)
: Trunk
: All All
: P1 normal (vote)
: mozilla6
Assigned To: Boris Zbarsky [:bz] (still a bit busy)
:
:
Mentors:
Depends on:
Blocks: 349259
  Show dependency treegraph
 
Reported: 2011-05-23 05:14 PDT by Simona B [:simonab ]
Modified: 2011-07-08 07:38 PDT (History)
10 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---
+
fixed


Attachments
Screenshot of the issue (26.09 KB, image/png)
2011-05-23 05:14 PDT, Simona B [:simonab ]
no flags Details
Minimal testcase based on the YouTube markup when the input is focused (451 bytes, text/html)
2011-05-23 06:56 PDT, Boris Zbarsky [:bz] (still a bit busy)
no flags Details
Password hidden ● top is cut off (49.21 KB, image/png)
2011-05-23 07:27 PDT, Alice0775 White
no flags Details
Go back to not allowing changes to line-height on inputs (but continue to allowing it for <button>s, for site compat reasons. (1.05 KB, patch)
2011-05-23 09:19 PDT, Boris Zbarsky [:bz] (still a bit busy)
dbaron: review+
Details | Diff | Splinter Review

Description Simona B [:simonab ] 2011-05-23 05:14:03 PDT
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 AndreiD[QA] 2011-05-23 05:19:44 PDT
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 2011-05-23 05:49:09 PDT
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 [:bz] (still a bit busy) 2011-05-23 06:53:13 PDT
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 [:bz] (still a bit busy) 2011-05-23 06:56:18 PDT
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.
Comment 5 Boris Zbarsky [:bz] (still a bit busy) 2011-05-23 07:03:12 PDT
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 2011-05-23 07:27:38 PDT
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 .
Comment 7 Boris Zbarsky [:bz] (still a bit busy) 2011-05-23 09:14:11 PDT
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 [:bz] (still a bit busy) 2011-05-23 09:19:06 PDT
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.
Comment 9 :Ms2ger (⌚ UTC+1/+2) 2011-05-23 12:35:00 PDT
http://hg.mozilla.org/mozilla-central/rev/b97aef275b5e
Comment 10 David Baron :dbaron: ⌚️UTC-7 (busy September 14-25) 2011-05-23 15:43:21 PDT
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] 2011-05-31 14:38:34 PDT
please nominate the attachment with a risk analysis.
Comment 12 Boris Zbarsky [:bz] (still a bit busy) 2011-05-31 19:26:24 PDT
There's no need to nominate; this was fixed for 6.
Comment 13 Simona B [:simonab ] 2011-07-08 07:38:17 PDT
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.

Note You need to log in before you can comment on or make changes to this bug.