1069634 - netflixaroundtheworld.com - Input cutting off descenders due to insufficient CSS 'height'

Status: RESOLVED INVALID

(Web Compatibility :: Desktop, defect)

Description

[Mats Palmgren (inactive)]

The specified CSS 'height' value for the search element at the top of the page
is too small so the text descenders are clipped.  Screenshot:
https://bug1068560.bugzilla.mozilla.org/attachment.cgi?id=8490657
(Firefox at the top)

Type "ggg" in the search field also reproduces the problem.


The root cause of the problem is this rule in
/assets/components/library/bootstrap/css/bootstrap.min.css:

.input-lg{
	height:46px;
	padding:10px 16px;
	font-size:18px;
	line-height:1.33;
	border-radius:6px
}

Comment 1

[Mats Palmgren (inactive)]

The mentioned stylesheet has numerous 'height' and 'line-height' declarations
for <input> and other replaced elements.  I'd strongly advice against such
practice since it is user hostile.  Many users have poor vision and thus
configure the font size in their browser to be larger than the 'font-size'
specified by the web developer which leads to this problem when 'height' and
'line-height' are hard coded in the style sheet.

I would recommend leaving 'height' and 'line-height' unspecified for <input>
and other replaced elements.

Comment 2

[Adam Stevenson [:adamopenweb]]

The website doesn't exist in the previous form. We now get a HTTP 301 to https://flixsearch.io. Closing as this is no longer valid.