search

webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
749 stars 68 forks source link

braytech.org - "Character" section does not load #86355

Closed revelae closed 3 years ago

revelae commented 3 years ago

URL: https://braytech.org/3/4611686018482907994/2305843009471664882/character

Browser / Version: Firefox 91.0 Operating System: Windows 10 Tested Another Browser: Yes Chrome

Problem type: Something else Description: destiny companion app - character segment will not load on ff and dev isn't sure how to fix Steps to Reproduce: "Firefox user

Firefox inexplicably locks up when displaying many items. I've spent hours attempting to debug and resolve this issue. I'm done with it. If you're a browser engineer or similar, and believe you can solve it, you're welcome to join the Discord and review the code. Many Chromium-based browsers are available – even WebKit browsers are good. Good luck."

Browser Configuration
  • None

From webcompat.com with ❤️

softvision-oana-arbuzov commented 3 years ago

Thanks for the report, I get the error message on Firefox and on Chrome it seems I don't have access to the "Characters" section. image

Tested with: Browser / Version: Firefox Nightly 94.0a1 (2021-09-09) Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

karlcow commented 3 years ago

So you need to be logged in to access the site. And the way firefox is blocked is through user agent sniffing. If i fake a chrome UA on Firefox, I don't get the error message.

It's hard to know what was happening.

if I remove the little SVG spinner animation the CPU goes down.

Tom Chapman is the creator. I wonder if he is on github too. Ah yes @justrealmilk That should help determine. Saving a performance profile of the page when trying to display the characters on Firefox would be super helpful too And the exact steps to reproduce for people who are not familiar with the app.

justrealmilk commented 3 years ago

What is occurring haha where am I?

I've disabled my Firefox block for beta.bray.tech/character (version 4695).

There is some hitching dependant upon the number of game items displayed at any time but WebKit and Chromium still get through it. I've experiment with how images are loaded and displayed and with CSS styling while trying to narrow the culprit but I'm outa ideas.

Now, the problem with getting a dev tools dump is that... it locks up the tab and dev tools 😂

At its core, there's an "items" component. Provided an array of small objects which serve as item identifiers, it returns a map of JSX elements for display. They're basically just icons

If you inspect the code through included maps and go to views -> Character -> index.tsx line 363, you'll see a reference to an Items component which lives at... components/Items

karlcow commented 3 years ago

@justrealmilk thank you for unblocking that could help us to determine what's going wrong!

https://beta.bray.tech/ How do you create a character. I have no idea what is happening. It just says that I can't access the character of someone else.

karlcow commented 3 years ago

This is happening after https://beta.bray.tech/profile-search noob here.

Once I can have access to a character, maybe we can start looking at performance profiles.

justrealmilk commented 3 years ago

Unfortunately, a Bungie account connected to a Destiny 2 profile is required.

profiles.zip

While slow, some views using similar code work. equipment.json is of the unusable view.

It takes 5 minutes for the page to finish rendering - I hit "Buffer 100% full" a minute in. I wasn't able to "Stop Recording Performance" but I was able to "Save" from the left-hand profiles list

justrealmilk commented 3 years ago

It's so weird. I remove images from render and all the jank is gone from other displays across browsers including Firefox... But it still struggles on the main display.

I removed most of the "item buckets" which reduces the number of items it's trying to display (not an issue for other views).

image

equipment-small.zip

Folks have sometimes pointed to the Tooltips component as it's named by the profiler so here's the same profile with the Tooltips component removed.

equipment-small-no-tooltips.zip

image

10 seconds on Layout lol idek

karlcow commented 3 years ago

Thanks @justrealmilk for the profiles!

@fqueze could you help dig into this to find the root cause of this performance issue? It seems pretty bad on Firefox.

fqueze commented 3 years ago

@justrealmilk It looks like the profiles you captured are from the devtools performance panel. This tool is meant to help understand what a web page does, but doesn't help to understand Firefox bugs. Is there any chance you could profile again using the Firefox Profiler? You can enable it at https://profiler.firefox.com/ , then please select the "Firefox Front-End" preset instead of "Web Developer". Start recording; once you are done, capture the profile, wait for it to load and click the "Upload Local Profile" button.

justrealmilk commented 3 years ago

@justrealmilk It looks like the profiles you captured are from the devtools performance panel. This tool is meant to help understand what a web page does, but doesn't help to understand Firefox bugs. Is there any chance you could profile again using the Firefox Profiler? You can enable it at https://profiler.firefox.com/ , then please select the "Firefox Front-End" preset instead of "Web Developer". Start recording; once you are done, capture the profile, wait for it to load and click the "Upload Local Profile" button.

I'm not sure what I'm doing but this might be what you'd like? https://share.firefox.dev/2XpDwQE

fqueze commented 3 years ago

I'm not sure what I'm doing but this might be what you'd like? https://share.firefox.dev/2XpDwQE

Thanks, this was exactly what we needed to identify the problem in Firefox. This now looks a lot like https://bugzilla.mozilla.org/show_bug.cgi?id=1591366 that is currently actively being worked on.

justrealmilk commented 3 years ago

I'm not sure what I'm doing but this might be what you'd like? https://share.firefox.dev/2XpDwQE

Thanks, this was exactly what we needed to identify the problem in Firefox. This now looks a lot like https://bugzilla.mozilla.org/show_bug.cgi?id=1591366 that is currently actively being worked on.

Wow! I commented out all of my display: grid; and it works perfectly!

karlcow commented 3 years ago

Thanks just @justrealmilk and @fqueze I will close here. and added the link to the seeAlso of the bugzilla issue. Duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1591366