New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 599138 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner: ----
Closed: Apr 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 3
Type: Bug



Sign in to add a comment

Moving "select" element doesn't change position of its dropdown

Reported by deathang...@gmail.com, Mar 30 2016

Issue description

Checkout the fiddle https://jsfiddle.net/9ek7Lzm9/ .I set transition when select get focused. If you click on select, the top div height changes pushing the select element down. While the input goes down,dropdown stays on the same place.

The same effect applies if you move select tag with javascript. For example if you set "select" "position" to "absolute" and change "top" while dropdown is shown.

Expected result:
select's dropdown should move along with select input like it happens in firefox (open the fiddle in firefox)

Tested in:
Windows Chrome 49
Linux Chromium 45

 
Cc: rnimmagadda@chromium.org
Labels: Needs-Feedback OS-Linux OS-Mac OS-Windows
@deathangel908: Could you please provide us the screen-recording for better understanding.

Attached are the screen-recording of Chrome & Firefox behavior and didn't find any difference.

Thank you.
599138.mov
5.1 MB Download
Firefox - 599138.mov
1.4 MB Download
Could you please take a look on your 2 videos. It should be noticable there.

Video 599138.mov (Chrome)
0) Div has "closed" class which means its height = 0x, and select position is 0px from top
1) 4s on 599138.mov  - You click on select.
2) Browser triggers focus events, javascript removes "closed" class from top div, making its height 30px. 
3) Transition anymation starts, pushing "select" element down. Note the position of the dropdown stays the same while select is going down. 
4) If you pause 599138.mov video on 5s you'll see that dropdown ("option"s) stays on top of the "select"

Firefox - 599138.mov 
1) The js/anymation rules stay the same
2) 2s 599138.mov  You click on select. js/anymation moves select down. Both select and its dropdown move down.
3) If you pause the "Firefox - 599138.mov" 4s you'll notice that dropdown stays below select.

Summarize:
If you move focused select element in Firefox its dropdown moves along with it, making the dropdown "attached" to select.
If you move fosuced select element in Chrome dropdown menu always stays on fixed position where it was opened) 

By select element I mean input with 2 arrows on the blue background and blue border
By dropdown I mean "option"s elements that select contains. They appear when you focus "select" tag

Chrome would be friendlier if select tag and its dropdown would be the same element. Thus it will avoid a confusion when focused select goes far away from dropdown or overlays it hidding the actual value.

Project Member

Comment 3 by sheriffbot@chromium.org, Apr 1 2016

Labels: -Needs-Feedback Needs-Review
Owner: rnimmagadda@chromium.org
Thank you for providing more feedback. Adding requester "rnimmagadda@chromium.org" for another review and adding "Needs-Review" label for tracking.

For more details visit https://sites.google.com/a/chromium.org/dev/issue-tracking/autotriage - Your friendly Sheriffbot
Components: Blink>Layout>Flexbox
Labels: -Needs-Review M-50
Owner: ----
Status: Untriaged (was: Unconfirmed)
Able to repro this issue on Windows 7, MAC (10.11.4) & Ubuntu Trusty (14.04) for Google Chrome Stable Version - 49.0.2623.112

This is a Non-Regression issue existing from M30 - # 30.0.1549.0

Comment 5 by e...@chromium.org, Apr 18 2016

Components: -Blink>Layout>Flexbox Blink>Layout
Status: WontFix (was: Untriaged)
Moving an element after the user has started to interact with it seems less than ideal to me. I'd argue that our behavior provides a better user experience. 

Sign in to add a comment