Closed Bug 1069634 Opened 6 years ago Closed 4 years ago

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

Categories

(Web Compatibility :: Desktop, defect)

Firefox 32
defect
Not set

Tracking

(Not tracked)

RESOLVED INVALID

People

(Reporter: mats, Unassigned)

References

()

Details

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
}
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.
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.
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → INVALID
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.