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

Issue 699246 link

Starred by 4 users

Issue metadata

Status: Assigned
Owner:
Last visit 29 days ago
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

[DevTools] Device Mode Is Not Handling Media Queries Correctly

Reported by kaycebas...@gmail.com, Mar 7 2017

Issue description

UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Steps to reproduce the problem:
1. Go to https://googlechrome.github.io/devtools-samples/mobile/v1
2. Starting with a wide window, reduce the width of the window.
3. Repeat #2, this time using Device Mode Responsive mode.

What is the expected behavior?
On a wide layout, you see 4 panels. On a medium layout, you see 2 panels. On a narrow layout, you see 4 panels again. This is when you're not in Device Mode.

What went wrong?
In Device Mode, it goes 4 panels on widge, 2 panels on medium, and stays at 2 panels on narrow (it should go back to 4 panels).

Did this work before? Yes 

Chrome version: 56.0.2924.87  Channel: stable
OS Version: 
Flash Version: 

Note that the demo intentionally has a mistake in the narrow media query (`@media (max-width: 599px) and (orientation: landscape)`).

 
dm1.png
274 KB View Download
dm2.png
296 KB View Download
dm3.png
215 KB View Download
nodm1.png
375 KB View Download
nodm2.png
382 KB View Download
nodm3.png
175 KB View Download
Disregard this note: "Note that the demo intentionally has a mistake in the narrow media query (`@media (max-width: 599px) and (orientation: landscape)`)."

It's no longer true
I also don't think it was relevant either way
Labels: Needs-Triage-M56
Labels: Needs-Bisect
Cc: krajshree@chromium.org
Labels: Needs-Feedback
Tried reproducing the issue on Ubuntu 14.04 and Win-10 using chrome reported version #56.0.2924.87 and latest canary #59.0.3036.0.

Attached a screen cast for reference.

Following are the steps followed to reproduce the issue.
------------
1. Navigated to https://googlechrome.github.io/devtools-samples/mobile/v1

2. Started with a wide window and observed 2 panels, reduced the size to medium and observed 4 panels, again reduced the size to narrow and observed 2 panels which is contradictory to the statement in the expected behavior of comment #0.

3. Again started with device Mode Responsive mode at 1294x1000 (75%) and observed 2 panels, reduced the size to medium and observed 4 panels and again reduced the size to narrow and observed 4 panels which is contradictory to the statement in the actual behavior of comment #0.

kaycebasques@ - Could you please verify the screen cast and please let us know where and what the issue is exactly.

Thanks...!!
699246.mp4
13.3 MB View Download
Hi krajshree@, your video reproduces the bug and describes the expected / actual behavior as I described in comment #0. There's some misunderstanding about what I mean by "2 panels" and "4 panels" so let me be more precise:

The expected behavior is:

Wide (A.K.A. viewport width >= 1000px): 2 rows, 4 columns
Medium (A.K.A. 600px <= viewport width <= 999px): 4 rows, 2 columns
Narrow (A.K.A. viewport width <= 599px): 2 rows, 4 columns

The actual (in Device Mode) is:

Wide (A.K.A. viewport width >= 1000px): 2 rows, 4 columns
Medium (A.K.A. 600px <= viewport width <= 999px): 4 rows, 2 columns
Narrow (A.K.A. viewport width <= 599px): 4 rows, 2 columns (this is where the bug is)

Project Member

Comment 7 by sheriffbot@chromium.org, Mar 10 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "krajshree@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Labels: -Pri-2 -Needs-Bisect -Needs-Triage-M56 hasbisect-per-revision M-59 OS-Mac OS-Windows Pri-1
Owner: dgozman@chromium.org
Status: Assigned (was: Unconfirmed)
Able to reproduce the issue on Windows 10, mac 10.12.3 and Ubuntu 14.04 using chrome reported version #56.0.2924.87 and latest canary #59.0.3040.0.

Bisect Information:
=====================
Good build: 49.0.2566.0    Revision(359969)

Bad Build : 49.0.2567.0    Revision(360248)

Change Log URL: 
https://chromium.googlesource.com/chromium/src/+log/9b66745fd5bd699d053d2593e11156983c1dfbb1..ba3840db6ae1e8e3cc1cfa7b763d3c93328c7121

From the above change log suspecting below change

Review url: https://codereview.chromium.org/1450133003

dgozman@ - Could you please check whether this is caused with respect to your change, if not please help us in assigning it to the right owner.

Thanks...!!
Cc: dgozman@chromium.org
Owner: lushnikov@chromium.org
@lushnikov -- Could you please look into the issue and respond to Comment# 8 & 9 which would help us in triaging the issue.
Thanks in Advance.
Labels: -Pri-1 Pri-2
Cc: lushnikov@chromium.org
 Issue 704761  has been merged into this issue.
Cc: kkaluri@chromium.org
 Issue 757400  has been merged into this issue.

Sign in to add a comment