1650288 - lazy-loading images don't always show up (until you scroll past them) on https://terraria.gamepedia.com/Guide:Walkthrough

Status: NEW

(Web Compatibility :: Site Reports, defect, P3)

Description

[Karl Dubost💡 :karlcow]

Steps to reproduce:

1. With Firefox Preview on Android
2. Go to https://terraria.gamepedia.com/Guide:Walkthrough#
3. try to scroll down
4. Dismiss the banner, scroll down

Expected:
smooth user interaction

Actual:
In between slow to janking/flickering.
Compare with chrome.

This is also kind of reproducible to a certain extent on Firefox Desktop with RDM and Firefox Android setup.

Images are lazy loaded.

Performance profile

• RDM Desktop: https://share.firefox.dev/3eV1qY3
• Mobile Device by the initial reporter: https://github.com/webcompat/web-bugs/files/4859167/Debug.zip (2 profiles included)

getPropertyValue of CSS seems to take a lot of time.

Comment 1

[Daniel Holbert [:dholbert]]

Here's one jank bar that seems to be associated with an image load, for what it's worth:
https://share.firefox.dev/32Q8KRh

Anyway, tagging this as qf:p3:responsiveness for QF triage.

Comment 2

[Daniel Holbert [:dholbert]]

I retested this today (on Android, using my Pixel 4a) and I noticed two things:
(1) I'm not seeing any more flickering in Firefox as compared to Chrome. (I actually see more flickering in Chrome than I do in Firefox!) (It's possible our performance has improved here, and/or that the site has undergone a bit of a redesign that mitigated this issue.)

(2) RE the lazy-loaded icon images (next to most of the linkified item-names and other links): I do see those failing to load in Firefox, e.g. if I slowly scroll down the page and look for linkified text that's missing an associated icon. However, these images do seem to load properly (and immediately) if I just scroll past them by 1-2 full viewport-heights and then scroll back up. So I wonder if they're lazy-loaded based on some "are we visible" code (IntersectionObserver or similar) which is ending up with incorrect coordinates in Firefox for some reason?

So I suspect there's not a perf bug here after all (or anymore), and just a correctness bug (on either our side or the site's side) for the lazy-loaded images.

--> Reclassifying to Layout:Scrolling since the correctness bug seems to probably be in that approximate neighborhood, and dropping perf keyword, but feel free to add it back if anyone sees different results from me RE Firefox vs. Chrome performance on this site.

Comment 3

[Daniel Holbert [:dholbert]]

(I also see some JS errors in the Web Console, like these:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://beacon.wikia-services.com/__track/special/adengpageinfo_props?a=4774&beacon=YIZlAyvJO7&c=2294765&cb=31130&ck=unknown&lc=en&n=110&prop_name=tab_id&prop_value=1c72dcc4-59dc-49c7-a04c-7a24f8b3a0e5&pv_number=3&pv_number_global=3&pv_unique_id=ae558517-24e3-424c-a17e-fc91e536885f&s=ucp_mobile&session_id=bc8fec91-c8b8-45f0-b7ce-8c94ef0295e4&timestamp=1646786545051&tz_offset=480&u=0&ua=Mozilla%2F5.0+%28Android+12%3B+Mobile%3B+rv%3A99.0%29+Gecko%2F99.0+Firefox%2F99.0&url=https%3A%2F%2Fterraria.fandom.com%2Fwiki%2FGuide%3AWalkthrough&x=terraria_gamepedia. (Reason: CORS request did not succeed). Status code: (null).

error { target: script, isTrusted: true, srcElement: script, eventPhase: 0, bubbles: false, cancelable: false, returnValue: true, defaultPrevented: false, composed: false, timeStamp: 3049, … }

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

Initially I thought maybe the lazy loading was failing because one of the uncaught errors was horking the site's JS and preventing subsequent JS from running properly. But it seems that's not the case, given that I can still get the images to load if I just scroll a little ways past them and then back up (as noted above).

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: screencast of images apparently failing to lazy-load until I scroll past them

Here's a screencast of the lazy-loading issue discussed above, in Responsive Design Mode using "Galaxy S20+ Linux" as my RDM device.

Notice that the images around the "Forest" section are all missing when I initially scroll to it, and then they appear after I scroll further down and then back up.

Comment 5

[Hiroyuki Ikezoe (:hiro)]

(In reply to Daniel Holbert [:dholbert] from comment #2)

However, these images do seem to load properly (and immediately) if I just scroll past them by 1-2 full viewport-heights and then scroll back up.

It sounds pretty much the same as what happens in bug 1800378.

Comment 7

[Ksenia Berezina [:ksenia]]

Moving to Web compatibility component to do more diagnosis