In several places it is possible for a white jarring flash to occur. The problem occurs due to how overlays are managed by MobileFrontend's OverlayManager
To understand the cause of the flashes it is important to first understand how the image overlay works.
The lifecycle
Typical life cycle of image overlay:
- User makes request to load image overlay via a change in the URL e.g. https://reading-web-staging.wmflabs.org/wiki/Stephen_I_of_Hungary#/media/File%3APortrayal_of_Stephen_I%2C_King_of_Hungary_on_the_coronation_pall.jpg
- The ImageOverlay code is downloaded via a transparent pane e.g.
- The OverlayManager checks the current route for a matching overlay that has been added inside a overlayManager.add call
- If a match, the callback is invoked, returning a Deferred object. When that deferred resolves, it resolves with an overlay which is then rendered in the display
- The ImageOverlay renders with a spinner
It fires a request to the api to obtain information about the image associated in the URL at a resolution matching the current display [[ e.g. https://en.m.wikipedia.org/w/api.php?action=query&format=json&prop=imageinfo&titles=File%3AStephen_I%27s_birth_(Chronicon_Pictum_037)%2Ejpg&formatversion=2&iiprop=url%7Cextmetadata&iiurlwidth=1280&iiurlheight=640 | example ]]
- When the API request returns, the image is downloaded. When the image finally finishes downloaded, the spinner is replaced with the image
- The image is readjusted based on the available space.
- When the user clicks the next/previous icons a new request is made (move to step 1)
The problem
There are two problematic flashes here.
- Inside the callback. Steps 1-3 are always performed asynchronously due to the way the code is setup in Minerva.
https://gerrit.wikimedia.org/r/448019 dealt with this part of the problem.
- In steps 5-7 with the callback problem removed the switch from a spinner to an image is jarring due to the asynchronous replacement of the existing image (5-6) and then the image adjustment (step 7)
Replication of problem 1
- Visit http://localhost:8888/w/index.php/Spain
- Click an image
- Close image overlay
- Set mode to offline
- Click image again
- Click left/right arrows.
You'll notice a white flash with each arrow click.
Notice how with https://gerrit.wikimedia.org/r/448019 this flash disappears.
Replication of problem 1+2 combined
Steps to Reproduce
- Go to https://reading-web-staging.wmflabs.org/wiki/Barack_Obama#/media/File%3AObama_Macri_October_2017.jpg
- Press the previous button
Expected Results
- The gallery gracefully animates preloaded images in
Ex: https://mobile.twitter.com/Oniropolis/status/998898880459804672
Actual Results
- The gallery unconditionally shows the spinner then immediately blasts it down with a massive white flare brighter than a thousand suns before begrudgingly and gutturally smashing the image in place:
- The gallery unconditionally shows the spinner then immediately blasts it down with a massive white flare brighter than a thousand suns before begrudgingly and gutturally smashing the image in place:
- When the image is initially opened from a page there is a flash of the top of the article right before the image loads. Check out this screen recording (Alex extended the frame where the top of the article flashes):
Environments Observed
- enwiki
Browser Version
- Chromium v66.0.3359.181
OS Version
- Ubuntu v18.04 64b
Device Model
- Desktop
Device Language
- English
Developer notes
The issue here is the asynchronous nature of the method loadImageOverlay and the synchronous nature of hiding an overlay.
Currently the media viewer route when invoked will make an async call to loadModule( 'mobile.mediaViewer' ) which will eventually resolve to an ImageOverlay (read about the JavaScript Eventloop if it's not clear why this is a problem)
To remedy this we'll want to make the mediaViewer synchronous every time the module has already been loaded
e.g.
} else if ( mw.loader.getState( 'mobile.mediaViewer' ) === 'ready' ) {
return makeOverlay( title );
} else {
return loader.loadModule( 'mobile.mediaViewer' ).then( function () {
return makeOverlay( title );
} );
}I've verified that this does indeed solve the problem.
QA notes
- Screen sizes to test: desktop & mobile
- Browsers to test on: Safari & Chrome
- Skin to use: Minerva
- Environment to test in: staging
- Steps:
- go to any page with multiple images (e.g. https://reading-web-staging.wmflabs.org/wiki/Gorilla?useskin=minerva)
- open an image and use the prev/next arrows to click through a bunch of images
- compare this experience with how it looks in production
- verify that the white flash you see in production is not present in staging
