unexpected element's width in "responsive mode developer tools"
Reported by
irham...@gmail.com,
Sep 17 2017
|
||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36 Steps to reproduce the problem: 1. open the index.html file on chrome 2. open developer tools 3. toggle device toolbar mode on What is the expected behavior? element nav take 100% width of its parent element What went wrong? element nav take unexpected width, ex: 100% width of its parent + 30px, etc Did this work before? N/A Chrome version: 60.0.3112.113 Channel: n/a OS Version: 6.3 Flash Version:
,
Sep 18 2017
,
Sep 19 2017
Tested the issue on 60.0.3112.113 on Windows10 and is not reproducible with below steps. 1.Opened attached index.html file in chrome and opened devtools. 2.Toggled device toolbar and clicked on navigation menu. No extra width is seen. Attaching screencast for reference. @Reporter: Could you please confirm whether we are missing anthing in steps and could you also upgrade chrome to latest stable and check the issue?
,
Sep 21 2017
The extra width is in fact there. However, this is not a DevTools Emulation problem. It is a problem with the style code to this site. When running on-device, the same problem exists. Therefore, emulation mode is doing exactly what it is supposed to here. A quick hack to get your navbar working is to use a width of `100vw` for it instead of 100%. But, for a more detailed answer on why this is happening and how to address it without viewport units, you'll need to get general support elsewhere. Try StackOverflow for general web development support. Thank you. |
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by irham...@gmail.com
, Sep 17 2017