search

online-go / online-go.com

Source code for the Online-Go.com web interface
https://online-go.com/
GNU Affero General Public License v3.0
1.26k stars 346 forks source link

Blank board with no grid or stones when clicking back into tab #2655

Open adamreisnz opened 6 months ago

adamreisnz commented 6 months ago

Describe the bug I have a tab with an active OGS game open in my browser. When I go and work in other tabs, and then return to the OGS tab, the grid and stones have disappeared and all I see is a blank wooden board.

This problem started a few days ago.

To Reproduce Steps to reproduce the behavior:

  1. Open a tab with an active OGS game (correspondence)
  2. Go do something else in another tab
  3. Wait about 1-2 minutes, or click around a bit between other tabs (not 100% sure if this is triggered over time or by other browsing activity)
  4. Go back to the OGS tab
  5. Note that stones and grid have disappeared
  6. Clicking on "back one move" or refreshing the page resolves the problem until the next time it occurs.

Expected behavior For the grid and stones to remain visible, as was previously the case.

Screenshots

image

Desktop (please complete the following information):

adamreisnz commented 6 months ago

The same thing is happening on the home page with the games overview:

image
ChrisMoutsos commented 6 months ago

I am experiencing this bug as well. I am not sure what causes it exactly, either.

anoek commented 6 months ago

Are you also on Mac, and also using Chrome @ChrisMoutsos ?

Chrome version 124, are you both still seeing this?

adamreisnz commented 6 months ago

Hi @anoek thanks for checking in. I have just checked it with Chrome 124, and have not run into the issue yet. Will post again if it does return, thanks!

Do you reckon it was a Chrome/webkit canvas rendering bug?

adamreisnz commented 6 months ago

Ah, looks like I spoke to soon, it's still happening unfortunately, on all 3 tabs that I had opened

image image
anoek commented 6 months ago

Bummer.

Whelp, I think the immediate workaround is to switch to a browser that doesn't have that bug, Firefox has always performed quite well.

Longer term the workaround site side is to switch rendering to use SVG's instead of Canvases. That seems to be an increasing priority, so I'll be working on that soon I think - however that's a fair undertaking so in the interim I'd suggest using Firefox.

adamreisnz commented 6 months ago

Ok, all good. Nah, I'll stick with Chrome. Will just have to refresh the page every now and then. Interestingly enough mobile Chrome doesn't seem to be affected?

Do you have any insights into what is actually causing the bug?

And what else has been driving the switch from Canvas to SVG? Curious about that direction. I didn't think you could do everything you can with Canvas with SVG, but I might be wrong.

anoek commented 6 months ago

On mobile it's a canvas allocation issue (out of memory). It only happens on iOS, and it'll happen after a couple of allocations or several hundred, sometimes it'll be a very tiny allocation (like we do for the stones), or sometimes the whole board. It feels to me like the browser isn't reclaiming some form of memory browser-wide, causing seemingly random failures on our site in particular, but I don't know for sure.

anoek commented 6 months ago

And yeah, SVG can't do everything canvas can do, but I think it can do everything we need it to do. This, amongst other anti-canvas issues that browsers have (canvases can/are used for fingerprinting in browsers, and so we've had to deal with working around issues that were introduced by browers attempting to combat fingerprinting). SVG's should work better for all of that, and make things usable when strict privacy modes are on (which results in our board looking like garbled static on those browsers sometimes). Should, in theory, fix issues like this too.

adamreisnz commented 6 months ago

Interesting, thanks. I'll have a look into that for my own project (Let's play go) as well. Currently using canvas, but it does have its quirks. Especially when dealing with rendering drop shadows for stones etc it can be a bit of a pain to clear/redraw them properly. If that can be just an SVG with a CSS applied drop shadow that would be so much cleaner.

anoek commented 6 months ago

Yeah, shadows were a big pain. We'll see how it goes, I went with canvas originally because SVG support was inconsistent and glitchy way back when, but it's pretty solid now so I think it'll probably be an overall win these days.

ChrisMoutsos commented 6 months ago

Are you also on Mac, and also using Chrome @ChrisMoutsos ?

Chrome version 124, are you both still seeing this?

Yes, I am on a Mac (Ventura 13.4) and using Chrome (Version 124.0.6367.119 (Official Build) (arm64)). I am still seeing it as well.

anoek commented 5 months ago

There is now an SVG renderer available that should resolve this issue, see https://forums.online-go.com/t/new-experimental-svg-based-goban-renderer/51831

With that option enabled, can either or both of you check things out and see if it's fixed for you? Thanks!

adamreisnz commented 5 months ago

Thanks, I have switched it on, and so far no issues it seems 👍🏼

ChrisMoutsos commented 4 months ago

Late reply, sorry... It seems like the original issue for me DID go away at some point, but I never switched the goban renderer to SVG! My Chrome updated in the meantime, to Version 125.0.6422.176 (Official Build) (arm64), so maybe that was a contributing factor.

In any case, the SVG renderer feature is awesome, thank you for that. It might help issue #1366 as well?

anoek commented 4 months ago

I think it's a step in the right direction for #1366 for sure. It's unclear to me how close it gets us, but at at least all the tools available for dealing with the dom become available for that purpose.