Page MenuHomePhabricator

Wrong last visual change on WebPageReplay mobile
Closed, ResolvedPublic

Assigned To
Authored By
Peter
Feb 4 2019, 1:32 PM
Referenced Files
F28238980: Screen Shot 2019-02-18 at 7.47.15 AM.png
Feb 18 2019, 6:48 AM
F28238983: Screen Shot 2019-02-18 at 7.47.47 AM.png
Feb 18 2019, 6:48 AM
F28235916: Screen Shot 2019-02-17 at 8.10.21 PM.png
Feb 17 2019, 7:10 PM
F28220734: 1-original.mp4
Feb 15 2019, 5:37 AM
F28192087: Screen Shot 2019-02-11 at 14.49.22.png
Feb 11 2019, 2:04 PM
F28192067: ms_006450.jpg
Feb 11 2019, 2:04 PM
F28192066: ms_006367.jpg
Feb 11 2019, 2:04 PM
F28116030: Screen Shot 2019-02-04 at 2.29.35 PM.png
Feb 4 2019, 1:32 PM

Description

I've been doing changes to use the upstream version of Visual Metrics and forgot that we where using a specific version that added more "fuzz" when we tried to find the last frames. Without that it looks like this:

Screen Shot 2019-02-04 at 2.29.35 PM.png (1×2 px, 107 KB)

And there's no visual change I can see at least. The last time I saw this, Pat was thinking it's Chrome that throws on anti alias but I'm not sure. I will look into it.

This is an example: http://webpagereplay-wikimedia.s3-website-us-east-1.amazonaws.com/?prefix=enwiki/mobile/chrome/100/Barack_Obama/2019-02-04-13-03/

Event Timeline

Hmm this was really annoying. I've been trying to backtrack/understand how this works. I've been trying with two images that is generated with a diff with VisualMetrics:

ms_006367.jpg (400×261 px, 22 KB)

ms_006450.jpg (400×261 px, 22 KB)

If I test them in a tool without any fuzz I can see small diff (the red):

Screen Shot 2019-02-11 at 14.49.22.png (1×1 px, 561 KB)

However when I run with fuzz factor 10% (as Visual Metrics) there's no diff.

I've tried it manually:

docker run -v “$(pwd)“:/video sitespeedio/visualmetrics-deps convert “/video/ms_006367.png” “/video/ms_006450.png” -crop 241x372+0+8 miff:- | compare -metric AE - -fuzz 10% null:

And I get a 0 back (0 pixels diff). So Visual Metrics shouldn't say it diff ... let me see if I can recreate the full video locally.

Adding an example file. Running default visual change gives last visual change something like 11 seconds but the "real" one should be more like 6 seconds.

There's two ways to fix this: when visual metrics removes frames from the end, it uses a fuzz factor of 10% (that's default that is used all over) and then compares pixel by pixel and the there must be zero pixels diff, for making sure that the screenshots are the same. However when looking for Visual Elements, the element also uses a 10 % fuzz but a 2% of pixels that can differs.

I've tried changing both and with that test file a 13% fuzz fixes the problem or a pixels diff of 0.01%. I think adding that pixel diff is better so we keep the same fuzz factor on all places. I'll make the change later today and push it on Monday.

I've pushed the fix now (with an annotation), I'll check that it really works before I close it.

No that didn't help, there is still something like 13 s last visual change happening for Obama on mobile. I've changed so that we look a 0.01% of the pixels can differ (that worked locally) but it seems that the diff is too small. Let me increase it a little and try again tomorrow.

I did some more changes and now uses 0.05% diff that's ok, that made it work so it runs in the servers now. Let me have a look tomorrow that everything is ok and then close.

This looks good now. Mobile changed like this for all URLs I checked:

Screen Shot 2019-02-18 at 7.47.15 AM.png (1×1 px, 213 KB)

And for desktop no change:

Screen Shot 2019-02-18 at 7.47.47 AM.png (1×1 px, 120 KB)