select scrollbar shows when not needed, overflow does not affect it
Categories
(Core :: Layout: Form Controls, defect, P3)
Tracking
()
People
(Reporter: vtwintiger, Assigned: emilio)
Details
Attachments
(2 files)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:107.0) Gecko/20100101 Firefox/107.0
Steps to reproduce:
created a page like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>select scroll bar test</title>
<style>
label {
font-weight: bold;
}
select {
margin-left: 2px;
margin-top: 4px;
padding: 5px;
border: 1px solid blue;
border-radius: 4px;
}
</style>
</head>
<body>
<form>
<label for="sel1">select 1: (overflow-y = hidden)</label>
<br>
<select id="sel1" name="sel1" size="3" style="overflow-y: hidden;">
<option>opt 1</option>
<option>opt 2</option>
<option>opt 3</option>
</select>
<br><br>
<label for="sel2">select 2: (overflow = auto)</label>
<br>
<select id="sel2" name="sel2" size="3" style="overflow: auto;">
<option>opt 1</option>
<option>opt 2</option>
<option>opt 3</option>
</select>
<br><br>
<label for="sel3">select 3: (scrollbar-width = none)</label>
<br>
<select id="sel3" name="sel3" size="3" style="scrollbar-width: none;">
<option>opt 1</option>
<option>opt 2</option>
<option>opt 3</option>
</select>
</form>
</body>
</html>
Actual results:
The scrollbar in the select element shows even though it is not needed. Applying overflow does not help (in fact, overflow-y makes it worse by covering the content).
Expected results:
The scrollbars should not display unless they are actually needed to expose overflowing content.
|
||
Comment 1•1 year ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Form Controls' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
|
||
Comment 2•1 year ago
|
||
The severity field is not set for this bug.
:jfkthame, could you have a look please?
For more information, please visit auto_nag documentation.
|
Assignee | |
Comment 3•1 year ago
|
||
|
|
Assignee | |
Updated•1 year ago
|
|
|
Assignee | |
Updated•1 year ago
|
|
|
Assignee | |
Updated•1 year ago
|
|
|
Assignee | |
Comment 4•1 year ago
|
||
This matches what Chromium does, and seems generally better.
|
||
Updated•1 year ago
|
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/d95a1f1a4375 Allow authors to override listbox select overflow styles. r=jfkthame,layout-reviewers
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/37798 for changes under testing/web-platform/tests
|
||
Comment 7•1 year ago
|
||
| bugherder | ||
Upstream PR merged by moz-wptsync-bot
|
||
Updated•1 year ago
|
|
|
||
Comment 9•1 year ago
|
||
Managed to reproduce on a 2023-01-05 Nightly build on Windows 10.
Verified as fixed on Firefox 110.0b5(build ID: 20230124185837) and Nightly 111.0a1(build ID: 20230125215201) on Windows 10, macOS 12, Ubuntu 22.
Description
•