WordPress.org

Make WordPress Core

Opened 3 months ago

Closed 3 months ago

Last modified 3 months ago

#52758 closed defect (bug) (fixed)

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

Reported by: vladytimy Owned by: ryelle
Milestone: 5.7.1 Priority: normal
Severity: normal Version: 5.7
Component: Help/About Keywords: has-patch
Focuses: javascript Cc:

Description

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!

Attachments (1)

52758.diff (477 bytes) - added by ryelle 3 months ago.

Download all attachments as: .zip

Change History (11)

#1 @SergeyBiryukov
3 months ago

  • Milestone changed from Awaiting Review to 5.7.1

#2 @vladytimy
3 months ago

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

Last edited 3 months ago by vladytimy (previous) (diff)

This ticket was mentioned in Slack in #core by vladytimy. View the logs.


3 months ago

#4 @joyously
3 months ago

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.

#5 @vladytimy
3 months ago

  • Focuses javascript added

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.

#6 @SergeyBiryukov
3 months ago

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

#7 @ryelle
3 months ago

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.

@ryelle
3 months ago

#8 @vladytimy
3 months ago

  • Keywords has-patch added

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.

#9 @ryelle
3 months ago

  • Owner set to ryelle
  • Resolution set to fixed
  • Status changed from new to closed

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.

#10 @ryelle
3 months ago

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.

Note: See TracTickets for help on using tickets.