select option auto hide
Categories
(Core :: Layout: Form Controls, defect)
Tracking
()
People
(Reporter: winblue201, Unassigned)
Details
Attachments
(2 files)
2021-07-07_11-21-40.gif
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0
Steps to reproduce:
Select option inside div:hover {overflow: scroll}.
<style type="text/css">
.wrapper {
border: 1px solid #ddd;
width: 500px;
margin: 0 auto;
height: calc(50vh);
}
.content {
overflow: hidden;
height: 100%;
}
.content:hover {
overflow-y: scroll;
}
</style>
<div class="wrapper">
<div class="content">
<select>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
</div>
</div>
Actual results:
Select option trigger hide when mouse leave (not yet selected).
Expected results:
Stop trigger hide.
|
||
Comment 1•4 years 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 revert this change in case you think the bot is wrong.
|
||
Comment 2•4 years ago
|
||
I guess the issue here arises because adding/removing overflow-y:scroll on the parent triggers a reflow that blows away the open <select> menu.
This doesn't happen in Chrome because as long as the menu is open, it simply doesn't update the :hover state of the parent, no matter where the mouse moves. To illustrate, try this modified version of the example: https://codepen.io/jfkthame/pen/eYWzXvB. Click once on the <select> to open the menu; then, while the menu is still open, move the mouse in and out of the rectangle. In Firefox, its color changes in response to the :hover pseudo even while the menu is open over it, whereas in Chrome nothing happens; it remains in its "hovered" state even when the mouse is far away.
Not sure offhand what (if anything) the spec has to say about this interaction.... maybe Emilio knows. Should the open menu be capturing all the mouse events here?
Thanks for your answer.
I'm still using overflow-y:scroll because I only want to show scroll when mouse hover on if content is larger than parent div. If the mouse leaves, hide the scroll because it is not necessary and for ux/ui (like sidebar Gmail).
I will be happy if this problem works like Chrome (no matter where the mouse moves).
|
||
Comment 5•4 years ago
|
||
This is a dupe of bug 1440506, but you can fix it with something that doesn't reconstruct the layout tree of the container. For example, you could use scrollbar-color: transparent transparent then on hover use scrollbar-color: auto.
Description
•