Issue metadata
Sign in to add a comment
|
DevTools: <select>s broken in device emulation
Reported by
mst3k...@gmail.com,
Sep 9 2016
|
||||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.89 Safari/537.36 Steps to reproduce the problem: 1. New Incognito window 2. Go to https://www.diffchecker.com/ 3. Hit F12 for dev tools 4. Toggle device toolbar to enable emulation 5. Click on dropdown menu What is the expected behavior? The dropdown should display the list of items. What went wrong? Instead it shows a black box offset to the right of the emulator. If the Chrome window is not maximized, the black box can appear outside of the Chrome window. Did this work before? Yes Chrome 52 Chrome version: 53.0.2785.89 Channel: stable OS Version: 10.0 Flash Version: Shockwave Flash 22.0 r0 When not using device emulation, the dropdown menu works correctly. This machine is using Intel HD 4400 video card with driver 20.19.15.4444 from 4/22/2016. Have also duplicated this issue on a Windows 7 x64 machine with an Intel HD 4000 video card on the latest driver. Came across similar but different behavior on a Windows 7 x64 machine with an AMD Radeon HD 5650 with the latest driver. The page blinks, but there's no black box or dropdown menu.
,
Sep 12 2016
Interesting! I don't believe we have this problem on mac/linux. Can you try the same thing on a friend's Windows machine? Anyone else starring this bug, can you also provide a screenshot or video of the bug? Are you also on windows 10? Thanks. dgozman, looks like some aspect of emulation is messing with the display of <select>s on Windows 10.
,
Sep 12 2016
My work computer experienced this which was on windows 7, my home computer also experiences this which is on windows 10.
,
Sep 12 2016
,
Sep 13 2016
Issue 643643 has been merged into this issue.
,
Sep 13 2016
Another repro case: http://webprime.org/chrome-issue/test.html
,
Sep 13 2016
nc
,
Sep 14 2016
It might be related to number of screens (monitors). I have two monitors. If I click on the select on the non-default (left) monitor, I do not see a black box, but I also do not see a dropdown. If I move the window to the default (right) monitor, I see the black box.
,
Sep 14 2016
Even the simplest of cases triggers this - data:text/html,<!doctype html><select><option>2</option><option>4</option></select>
,
Sep 26 2016
Issue 649282 has been merged into this issue.
,
Sep 26 2016
,
Sep 28 2016
I'm seeing this in Linux in version 55.0.2873.0 (Official Build) dev (64-bit) running on Kubuntu 16.04 fully updated. However, instead of a black box the select box shows up massive and far to the lower-right corner of Device Mode.
Single-monitor running an Intel integrated GPU. Not sure of the exact version on the GPU side, but the CPU package is the I5-M560.
Reproduction steps:
In Omnibar insert:
data:text/html,<!doctype html><select> <option>1</option> <option>2</option> <option>3</option> </select> <style type="text/css"> select { width: 100%; font-size: 120px; } </style>
Then open device mode and select Nexus 5X for emulation and refresh to be safe.
,
Sep 28 2016
I have a similar problem. When device emulation is active dropdowns won't open. That started when I updated to the latest version of Chrome. I have Windows 10 Pro (English) x64, Chrome 53.0.2785.116m. PC: Intel i7-5557U, video Intel Iris Graphics 6100 (driver from Intel Corporation, version 20.19.15.4380)
,
Sep 29 2016
Issue 648966 has been merged into this issue.
,
Sep 29 2016
,
Sep 29 2016
The linked issue had the same problem on a Mac, someone needs to update the OS list here. That makes it a full three-way break.
,
Sep 29 2016
,
Sep 29 2016
Something is very very wrong. Depending on where I put Chrome, with dev tools open and mobile view on, when I click the drop down on the DiffChecker.com web site I get a white square appearing *outside the Chrome window*. It is not even at a consistent offset. See these two screen shots.
,
Sep 29 2016
We have the same problems on All android device using Chrome. Uou web application is developped with ionic 1. before everything works well!
,
Sep 29 2016
Please, just star the issue instead of adding comments that pretty much repeat everything else. The issue was reproduced and it is being investigated.
,
Sep 30 2016
Was able to reproduce the issue using below urls on Windows and Linux, but not on Mac though. 1) https://www.diffchecker.com/ 2) http://webprime.org/chrome-issue/test.html 3) data:text/html,<!doctype html><select><option>2</option><option>4</option></select> 4) data:text/html,<!doctype html><select> <option>1</option> <option>2</option> <option>3</option> </select> <style type="text/css"> select { width: 100%; font-size: 120px; } </style> Bisect info, could not perform tool bisect as its broken in the branch. =============--------------------------------------------------- Good : 53.0.2785.76 Bad : 53.0.2785.77 Change Log: https://chromium.googlesource.com/chromium/src/+log/53.0.2785.76..53.0.2785.77?pretty=fuller&n=10000 Possible Suspect : https://codereview.chromium.org/2265923002 bokan@ : Could you please take a look into this if its related to your change.
,
Sep 30 2016
Sorry for the breakage folks, I'm aware of the issue and looking into it.
,
Oct 3 2016
I am also getting the same issue in mobile mode. The dropdown is not opened in mobile mode using dev tool simulator but it works in Desktop mode. In addition in chrome 53, I am trying to open a dropdown using keyboard event in Desktop mode but it does not work and it works as expected in chrome 49.
This is the code i am using for dropdown keybord functionality.
element.on("keydown", onKeyDown);
function onKeyDown() {
var elem=angular.element(element.find('select'));
var e = document.createEvent("MouseEvents");
e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0,false, false, false, false, 0, null);
elem.dispatchEvent(e);
}
any ideas?
,
Oct 3 2016
#25 - 1. Please, just star issue 642349 instead of re-reporting it in the comments. 2. The dispatch-keyboard-event-to-open-select-box regression is intentional. See 423975 for details.
,
Jan 13 2017
I am still experiencing this issue as of Chrome 55. I see that this is marked as duplicate and the other issue is closed. The problem is not resolved, it still exists.
,
Jan 13 2017
#27 - please, file a new issue for it with as much details as possible (a screenshot, the DPI of your operating system, your operating system name and version, any non-default graphics/resolution setting you enabled on your browser or operating system, the number of monitors you have, whether it happens in all of the monitors or only some and output from about:gpu). You can reply with the new issue number.
,
Jan 26 2017
I have the same issue with drop-downs on my Chrome on Ubuntu. And this is annoying, as I am a QA in an IT company and I have to show demos to Clients using emulator, but I am not able to select anything! Please see the attached screenshot. It would be very helpful if you resolved the issue.
,
Jan 26 2017
#29 - Chrome 54 already has the fix (see issue 642349 ). Please, make sure you are using the latest version (56, released today or yesterday). If you are still seeing this despite using the latest version (56), please, file a new issue. |
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by exa...@gmail.com
, Sep 9 2016