5.7 About Page: Image comparison doesn't work on first load on some browsers

[vladytimy]

The image comparison script doesn't work on the first load of the page (after updating) - on some browsers. It works if page is refreshed.

First mentioned ​here by @joyously

The ​video showing the issue

The updating scenarios explored on Chrome & Edge

• 5.6.2 => 5.7 ==> Doesn't work
• 5.6.2 => 5.7 => 5.6.2 (rollback) => 5.7 ( all in the same browser) ==> Works!
• 5.6.2 => 5.7 => 5.6.2 (in browser A) & 5.6.2 => 5.7 (browser B) ==> Doesn't work!
• Fresh install of 5.7 (both local & on a server) /wp-admin/about.php ==> Works!

And now a strange thing (I'll accept if this can't be replicated, since I don't even understand how this can be) (everything in the same browser):

1. 5.6.2 -> 5.7
2. 5.7->5.6.2
3. Clear cache, cookies, etc.
4. 5.6.2 -> 5.7 ==> Works!

The updating scenario explored on Opera

• 5.6.2 => 5.7 ==> Doesn't work

The updating scenario explored on Firefox & Brave

• 5.6.2 => 5.7 ==> Works!

Also

• A diff checker between first load and 2nd load did not show anything (I thought about ?ver=x)
• Nothing comes up in the console
• The issues have been replicated locally & on 2 different servers

Maybe someone can see what's the problem trough the results above. At first I thought it might be cache related, then, it seems it's how browsers handle things. This is tricky because it needs to be caught at its first load in the browser. Would be nice to have a fix in 5.7.1 because that comparison block looks pretty nice!

[vladytimy]

Note: Read Incognito Window instead of Browser B (it was the same browser). Also, all tests above were made on Windows.

[joyously]

I use Firefox on Ubuntu Studio 20.04, and that test site is installed in a folder, not the root.
I don't see what difference the About page would have between the update redirect and the refresh once you're already there.

[vladytimy]

I think I found out the source of the problem:

wp.domReady() that controls the code handling the Image comparison doesn't behave properly in all browsers.

• If that function content is called in the console it works fine on the first load
• If that function is called by a setTimeout() instead, it works fine on the first load

so wp.domReady() is most likely to be the source of the issue here

Now we need someone that knows how to fix that. I'll see if I find any documentation on how that works.

[SergeyBiryukov]

Just noting that I was able to reproduce the issue in Edge 89.0.774.45.

[ryelle]

I'm pretty sure this happens when one of the images is not fully loaded before the comparison script runs - it looks like domReady runs when the page is loaded, not necessarily when all the assets are loaded. Switching to ​the window load event should wait until all resources are loaded.

[vladytimy]

Tested 52758.diff on

• Chrome 89.0.4389.82
• Edge 89.0.774.45
• Opera 74.0.3911.203
• Firefox 86.0
• Brave 1.21.76

on Window & Firefox 68.0.2 on Ubuntu

It works very nice, waiting until all resources are loaded.

[ryelle]

In 50535:

Help/About: Run image comparison script after all assets have loaded.

If the callback is called before the images are loaded, the comparison doesn't work. wp.domReady uses DOMContentLoaded, which does not guarantee that the images are loaded. This switches to use the load event, which waits for all resources to load.

Props vladytimy, joyously, sergeybiryukov.
Fixes #52758.

[ryelle]

In 50536:

Help/About: Run image comparison script after all assets have loaded.

If the callback is called before the images are loaded, the comparison doesn't work. wp.domReady uses DOMContentLoaded, which does not guarantee that the images are loaded. This switches to use the load event, which waits for all resources to load.

Props vladytimy, joyously, sergeybiryukov.
Merges [50535] to the 5.7 branch.
Fixes #52758.