Open Bug 1650288 Opened 2 years ago Updated 4 months ago

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

Categories

(Core :: Layout: Scrolling and Overflow, defect)

77 Branch
Unspecified
Android
defect

Tracking

()

Performance P3
Webcompat Priority P3
Tracking Status
firefox79 --- affected
firefox80 --- affected

People

(Reporter: karlcow, Unassigned)

References

()

Details

Attachments

(1 file)

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

getPropertyValue of CSS seems to take a lot of time.

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.

Whiteboard: [qf:p3:responsiveness]
Performance: --- → P3
Whiteboard: [qf:p3:responsiveness]
Webcompat Priority: ? → P3

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.

Component: Performance → Layout: Scrolling and Overflow
Summary: lazy-loading images performances for small images → lazy-loading images don't always show up (until you scroll past them) on https://terraria.gamepedia.com/Guide:Walkthrough#
Summary: lazy-loading images don't always show up (until you scroll past them) on https://terraria.gamepedia.com/Guide:Walkthrough# → lazy-loading images don't always show up (until you scroll past them) on https://terraria.gamepedia.com/Guide:Walkthrough

(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).

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.

You need to log in before you can comment on or make changes to this bug.