Setting ViewPort and UserAgent chops off part of the video and filmstrips

[shaqb]

When I run the following command:

docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:12.2.2 https://www.sitespeed.io --mobile

I get a set of filmstrips and videos that use the OOTB iPhone6 UserAgent and ViewPort in my tests.

If I run docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:12.2.2 https://www.sitespeed.io --browsertime.viewPort 360x640 --browsertime.userAgent "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"

Which uses exactly the same UserAgent and ViewPort I get a section of the video and filmstrips removed.

I have attached the two runs. 2020-03-19-10-06-46.zip 2020-03-19-10-09-38.zip

[soulgalore]

Hi @shaqb thanks for the bug report, yes something looks wrong. Let me try to have a look and try to fix it later this week.

[shaqb]

Thanks @soulgalore. I have also tried playing around with lots of Chrome Mobile Emulation settings like:

"chrome.mobileEmulation.width": 375
"chrome.mobileEmulation.height": 812
"chrome.mobileEmulation.pixelRatio": 3.0

and see the same issues. I can provide more reports/details if you need!

[soulgalore]

I think pixel ratio could be a problem but I haven't looked. No I could reproduce that's good.

[soulgalore]

It works for me in Firefox, so it looks to be something off on how setup everything for Chrome.

[shaqb]

I just tried with Firefox and looks like the issue remains to me.

docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:12.2.2 -b firefox https://www.sitespeed.io --browsertime.viewPort 360x640 --browsertime.userAgent "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"

I've attached the output:

2020-03-20-11-22-10.zip

[soulgalore]

Hmm you are right, now when I tested with Firefox I get the same problem, let me try to fix this.

[soulgalore]

The problem is how we handle viewPort vs setting the window size, so there's a discrepancy there. Let me see if I can find any best practice how we should set it up.

[livrennie]

I'm having the same issue.

I can't run a test using --mobile, as the site I'm testing can't load as the web browser (iOS 11) is out of date. I have attached the output here: 2020-10-01-14-07-14.zip

When I set the viewport size manually the video is cropped.

[soulgalore]

I haven' get around to have a look at this yet (I've focused on real mobile phones last months). Let me have a look again early next week.

[soulgalore]

@livrennie if you set to one of the existing emulation ones, do that work? --mobile --browsertime.chrome.mobileEmulation.deviceName "iPhone X"? When did a quick try it seemed to work.

[livrennie]

I have tried that, getting the same issue: 2020-10-02-08-21-57.zip

[soulgalore]

@livrennie I think setting --mobile is just a short version of setting mobile to iPhone 6, so if you run like docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:15.2.0 --browsertime.chrome.mobileEmulation.deviceName "iPhone X" https://laperla.com/nightwear/ -n 1 (skipping --mobile and setting mobile emulation direct in Chrome) it should work (it looks ok for me at least).

[edevlin-made]

fyi I'm using sitespeed.io docker image 15.6.0-plus1 and having the same problem. Sitespeed's verbose logging shows my config includes these elements:

  "browsertime": {
...
    "chrome": {
      "CPUThrottlingRate": 4,        
      "mobileEmulation": {
        "height": 668,
        "width": 376
      },
...
    },
    "connectivity": {
      "engine": "throttle",
      "profile": "3g"
    },

I'm not using --mobile because I want it to feel like an iPhone 8, and I don't set mobileEmulation.deviceName because I need to use a custom user agent string in order to get past bot-protection. But I get the same problem if I just set deviceName to iPhone 8, and leave the default height/width/viewport settings.

In the HTML report, the screenshot on the page summary tab looks great, but the filmstrip thumbnails and the video seem to show a wider screen that's been cropped.

Screenshot looks like this: good layout, no cropping

but the final image in the filmstrip looks like it was rendered for a browser with a wider screen and then cropped:

I've tried excluding mobileEmulation.deviceName and explicitly setting viewPort, mobileEmulation.width and .height - can't get it to look right.

[soulgalore]

I'm rewriting Visual Metrics this week and lets make sure I fix this.

[soulgalore]

This is still reproducible in sitespeed.io: bin/sitespeed.js https://www.sitespeed.io --browsertime.viewPort 360x640 --browsertime.userAgent "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1" --video --visualMetrics -o

I don't see this problem in our tests for Wikipedia, let me have a go at finally fixing this.

[soulgalore]

This happens in both Firefox and Chrome. When I'm testing this seems to happen if the width is smaller than 500 pixels. However it only happens if you manually set the viewport, if yo use Chrome mobile emulation it works.