Body width problem in devtools device emulation
Reported by
nicinix@gmail.com,
Sep 6
|
|||||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36 OPR/55.0.2994.44
Steps to reproduce the problem:
1. Paste the following code in a file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
</head>
<body>
<div style="height: 30px; background-color: blue; width: 100%;"></div>
<div style="height: 30px; background-color: red; width: 592px;"></div>
</body>
</html>
2. Go to that page and open devtools
3. Switch on device emulation and choose any device
4. Resize to smaller than 592px
5. The blue <div> should be 100% across the viewport and the viewport should be able to scroll to see the rest of the red div but it does not the viewport is stretched to the size of the red div.
6. Sometimes undock and redocking the devtools panel fixes the issue.
What is the expected behavior?
The blue <div> should be 100% across the viewport and the viewport should be able to scroll to see the rest of the red div
What went wrong?
Viewport is stretched to the largest elements width and if one inspects the body element you will see that it does not line up with the viewport.
Did this work before? N/A
Chrome version: 69.0.3497.81 Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 30.0 r0
,
Sep 12
nicinix@ Thanks for the issue. Able to reproduce the issue on Windows 10, Mac OS 10.13.3 and Ubuntu 17.10 on the latest Stable 69.0.3497.92 and the latest Canary 71.0.3549.0 by following the steps given above. Attached is the screen shot for reference. This is a Non-Regression issue as this is observed from M-60 chrome builds. Hence marking this as Untriaged for further updates from Dev. Thanks..
,
Sep 24
,
Sep 24
,
Nov 14
|
|||||
►
Sign in to add a comment |
|||||
Comment 1 by viswa.karala@chromium.org
, Sep 6