Lighthouse: [BUG] viewport size when console is opened
Bug report
Provide the steps to reproduce
- Run LH on any webpage (for example on youtube.com).
What is the current behavior?
(console is count to that)
What is the expected behavior?
No error, viewport is correctly if set dock side of console at bottom or as external window.
Environment Information
- Affected Channels:
*Chrome: 67.0.3396.99
a337fbf3c2ab8ebc6b64b0bfdce73a20e2e2252b-refs/branch-heads/3396@{#790} - Operating System: Windows 10
V8 6.7.288.46
Related issues
Mlocik97-issues
All 15 comments
For others trying to reproduce, this requires that mobile emulation be disabled and you run in DevTools.
More broadly, I think this audit is 100% useless when mobile emulation is disabled anyhow since it's only catching cases where the content isn't sized the same as the viewport on a phone. Perhaps we should mark not applicable when mobile emulation is off?
patrickhulce
on 26 Jun 2018
likely resolved with https://github.com/GoogleChrome/lighthouse/pull/5893
paulirish
on 27 Aug 2018
Have we confirmed this is fixed?
exterkamp
on 19 Dec 2018
I think, it's fixed in Chrome 71.0.3578.98,...
Mlocik97-issues
on 6 Jan 2019
Chrome 72.0.3626.119 again that bug
Mlocik97-issues
on 26 Feb 2019
@Mlocik97-issues the fix for this is not in v3.2.0 which is what is currently in stable Chrome. The fix should be in the next major version of Chrome in Lighthouse v4.0.0-alpha and higher.
patrickhulce
on 27 Feb 2019
So while it's true that Chrome 72.0.3626.119 never had the fix to begin with and is expected to fail, even in with versions of Lighthouse that have the fix, Chrome will still fail.
The workaround in LH uses emulatedFormFactor but Chrome DevTools is still using the deprecated disableDeviceEmulation https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/audits2/Audits2Controller.js?type=cs&q=disableDeviceEmulation+-f:out+f:audits&sq=package:chromium&g=0&l=242
IMO, we should fix this Chrome-side.
patrickhulce
on 8 Mar 2019
The problem seems to be more than just an attached dev tools, it seems to also be applicable when the dev tools are detached.. (if this is already known ignore the following ;-))
(Chrome 73.0.3683.75)
Test via minimal html at https://wn2v4zmv58.codesandbox.io/
Open devtools, detach and then audit...
e.g.
lighthouse
The viewport size is 1454px, whereas window size is 1462px
The viewport size is 1981px, whereas window size is 1989px
The difference (when detached) is always 8px? could it in this case be the scrollbar?
The audit pass description of
The audit passes if
window.innerWidth === window.outerWidth.
Seems to not be the actual test/audit?
AubreyHewes
on 15 Mar 2019
@exterkamp Still a bug for me docking our PWA score when it's actually fine. Running Chrome Version 77.0.3865.75 (Official Build) (64-bit)
For all intents and purposes, it should pass: https://developers.google.com/web/tools/lighthouse/audits/content-sized-correctly-for-viewport?utm_source=lighthouse&utm_medium=devtools
jflayhart
on 17 Sep 2019
@jflayhart please provide a URL. I only see a grey circle for that audit in 77 (which is wrong too ...)
@paulirish the connection hand off bug is in 77 (doc you made for reference). The multi-client change fixed that, landed 78.
EDIT: I'm not sure if the original bug here has been fixed, hard to reason about since there's 3-4 bugs dealing with device emulation in DevTools.
connorjclark
on 17 Sep 2019
seems it's fixed in Chrome 77.
Mlocik97-issues
on 17 Sep 2019
Update - there is a bug in 77 where the content-width (and thus PWA) will always fail. If there is another stable release for 77 (this is out of our hands, as it's not a critical security issue, but I expect there should be one), then there will be an update that disables this audit. For 78+, the root cause was fixed and the PWA category will work fully as expected.
connorjclark
on 19 Sep 2019
It's still reproducible for me in Chrome 77, although I can't reproduce it with latest Canary 79 so let's hope it's already resolved and will land to stable soon
AndrewBogdanovTSS
on 23 Sep 2019
This is still an issue in Version 78.0.3904.108
running window.innerWidth === window.outerWidth when dev tools is docked to the side results in false. As an external window or docked to bottom, it returns true but "Content is sized correctly for the viewport" still fails.
Although, it is grey so I'd assume it's not actually counting towards the PWA score..?
davidwieler
on 30 Nov 2019
it is grey so I'd assume it's not actually counting towards the PWA score
If it is grey it is not applicable and not affecting your score. Is there a reason you say you're seeing it as an issue @davidwieler?
I'm not able to reproduce any behavior other than notApplicable when run as desktop in Canary 81.0.4041.3, the original root issue here.
patrickhulce
on 28 Jan 2020
Related issues
mbparvezme
·
3Comments
devrsi0n
·
3Comments
dkajtoch
·
3Comments
sanprieto
·
3Comments
Simply007
·
3Comments
Most helpful comment
Update - there is a bug in 77 where the content-width (and thus PWA) will always fail. If there is another stable release for 77 (this is out of our hands, as it's not a critical security issue, but I expect there should be one), then there will be an update that disables this audit. For 78+, the root cause was fixed and the PWA category will work fully as expected.