New issue
Advanced search Search tips

Issue 813607 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner: ----
Closed: Feb 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Emulation not respecting media queries under 768px

Reported by abr...@kennedyc.com, Feb 19 2018

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Safari/537.36

Steps to reproduce the problem:
1. Visit site that uses media queries below 768px (Bootstrap 4 grid in my case)
2. Start device emulation and set width between 576px and 768px.

What is the expected behavior?
I expect the device emulation to honor my media queries at that width.

What went wrong?
The media queries at that width are not taking effect.

Did this work before? Yes Chrome 63

Chrome version: 64.0.3282.167  Channel: stable
OS Version: OS X 10.13.3
Flash Version: 

A weird thing to note is if I actually resize the browser (instead of using device emulation) it works fine.

Also, I'm not sure that 768px is a specific cutoff where the issue is happening. It's just that's a breakpoint I happen to use.
 
Labels: Needs-Bisect Needs-Triage-M64
Labels: Triaged-ET Needs-Feedback
Unable to reproduce the issue on chrome reported version 64.0.3282.167 using Mac 10.13.3 with steps mentioned below:
1) Launched chrome reported version navigated to www.google.com
2) Opened Devtools > clicked on "Toggle Device toolbar" > selected "Show media queries" and selected below 580px
3) Started Device emulation and kept width of 580px
4) Able to see device emulation width changes as per media queries width

@Reporter:
Please find the attached screen cast for your reference, try to test this issue by creating new person with no apps and extensions in it and let us know if the issue still persists.

Thanks!
813607.mp4
1.8 MB View Download

Comment 3 by abr...@kennedyc.com, Feb 20 2018

trying to work on a reduced test case.  will do some more digging and get
back to you this week
Project Member

Comment 4 by sheriffbot@chromium.org, Feb 20 2018

Cc: viswa.karala@chromium.org
Labels: -Needs-Feedback
Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Labels: Needs-Feedback
As per comment#3 from the reporter, adding Needs-Feedback label.

Thanks!

Comment 6 by abr...@kennedyc.com, Feb 21 2018

Definitely an error on my part. Was missing the meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

When using the emulation, the elements would never get smaller than 980px. Was able to query for that to realize my mistake with the missing meta tag.

Thanks for the help!
Project Member

Comment 7 by sheriffbot@chromium.org, Feb 21 2018

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Labels: Needs-Feedback
As per comment#6, we unterstood that issue has been resolved, could you plese confirm the same, so that we can close this issue.

Thanks!

Comment 9 by abr...@kennedyc.com, Feb 22 2018

Issue is closed. thanks.
Project Member

Comment 10 by sheriffbot@chromium.org, Feb 22 2018

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Labels: -Needs-Bisect
Status: WontFix (was: Unconfirmed)
As per comment#9 by reporter closing this issue.

Thanks!

Sign in to add a comment