Device Toolbar rotate triggers mediaquery changes twice with wrong values
Reported by
fleptro...@gmail.com,
May 9 2018
|
|||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36 Steps to reproduce the problem: 1. Build a simple JS or use Foundation 'changed.zf.mediaquery' to detect when mediaquery changes and print a message on the console. 2. Load the page, open devtools device simulator, choose any device and rotate it. 3. Observe that it will trigger TWO changes while it should only be one. What is the expected behavior? If I'm rotating a simulated device, only the correct media queries should be fired. What went wrong? On an website I'm working on when I rotate any device on the Device Toolbar between portrait <-> landscape, this will trigger the media query twice and with wrong values first. For example, if I rotate iPad from landscape (large) to portrait (medium) , devtools will first report that i'm going from large to small then small to medium. And then if I'm going from medium to large, it reports medium > xlarge > xlarge > large. I tested this with iPad Pro simulator and the same thing happens, always it will trigger a wrong mediaquery value before going to the correct one. I then evaluated this on a real device with console exposed and it doesn't happen. I also tested this on Firefox DevTools and also doesn't happen. So it seems a DevTools issue when rotating simulated devices that is resizing the viewport to wrong mediaqueries before going to the correct one. Did this work before? N/A Chrome version: 66.0.3359.139 Channel: stable OS Version: 10.0 Flash Version:
,
May 9 2018
,
May 9 2018
UPDATE: With more testing I narrowed this issue down: this will happen ONLY when "Auto-adjust zoom" is selected. As I was testing iPad Pro, Dev Tools was changing the zoom to fit on the space and this triggers a media query change. Sorry to not get this before to be on the first report.
,
May 10 2018
Thanks for filing the issue! @Reporter: Could you please provide sample test file/URL that reproduces the issue which help in further triaging it from TE end, if possible please provide screencast of the issue which helps us in better understanding. Thanks!
,
May 10 2018
Hi @viswa.karala Here is a test file: https://codepen.io/flep/full/NMYvxE/ Attached is an animated GIF recording the issue. Hope it helps.
,
May 10 2018
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
,
May 10 2018
|
|||||
►
Sign in to add a comment |
|||||
Comment 1 by fleptro...@gmail.com
, May 9 2018