Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

x/website: visualization tools in gc-guide have left text cut off with firefox #53850

Open
eikenb opened this issue Jul 13, 2022 · 10 comments
Open
Labels
NeedsInvestigation
Milestone

Comments

@eikenb
Copy link

@eikenb eikenb commented Jul 13, 2022

What is the URL of the page with the issue?

https://tip.golang.org/doc/gc-guide

What is your user agent?

Mozilla/5.0 (X11; Linux x86_64; rv:91.0) Gecko/20100101 Firefox/91.0

Screenshot

2022-07-13-115103_1321x1085_scrot

What did you do?

Visited and started reading the gc-guide.

What did you expect to see?

The full interactive graphs.

What did you see instead?

The interactive visualization tools didn't fully show the Y axis labels. They were cut off on the left. The screenshot says it best.

@eikenb eikenb added the pkgsite label Jul 13, 2022
@gopherbot gopherbot added this to the Unreleased milestone Jul 13, 2022
@seankhliao seankhliao changed the title x/pkgsite: visualization tools in gc-guide have left text cut off with firefox x/website: visualization tools in gc-guide have left text cut off with firefox Jul 13, 2022
@seankhliao seankhliao added NeedsInvestigation and removed pkgsite labels Jul 13, 2022
@seankhliao
Copy link
Member

@seankhliao seankhliao commented Jul 13, 2022

The text in the svg looks suspiciously large, do you have settings (default font, font size)/extensions that may be affecting the rendering of the image?

I would expect it to look like:
2022-07-13-200500

@jamalc jamalc removed the website label Jul 14, 2022
@jamalc
Copy link

@jamalc jamalc commented Jul 14, 2022

cc @mknyszek

@mknyszek
Copy link
Contributor

@mknyszek mknyszek commented Jul 14, 2022

It kind of seems like Firefox just behaves differently when some aspects of the font aren't explicitly set? The rest of the text looks OK. I suppose I didn't notice because of how it's rendered in Chrome (which is primarily what I tested this in).

I suspect this might just be an easy fix to explicitly set the font size for the axis labels.

(Please forgive my UI mistakes across browsers, this isn't an area I work in often so I didn't fully appreciate browser differences in rendering.)

@mknyszek
Copy link
Contributor

@mknyszek mknyszek commented Jul 14, 2022

I have a patch that might fix it, but I can't actually reproduce this in my local copy of Firefox on macOS. I don't have a Linux machine with a screen that I could try it on.

If you want to try the patch yourself, you can clone https://go.googlesource.com/website, patch in https://go.dev/cl/417634, and run go run ./cmd/golangorg from the repository root. The site will be served on localhost:6060 by default..

@gopherbot
Copy link

@gopherbot gopherbot commented Jul 14, 2022

Change https://go.dev/cl/417634 mentions this issue: _content/doc: explicitly set font size for X and Y axis labels

@mknyszek
Copy link
Contributor

@mknyszek mknyszek commented Jul 14, 2022

I also put up another patch for the alignment issues you're seeing (and better small-screen behavior in general).

@mknyszek
Copy link
Contributor

@mknyszek mknyszek commented Jul 14, 2022

I landed the patch; it's harmless to make the font size more explicit. I'll leave this issue open until someone can confirm the issue is fixed for them.

@mknyszek mknyszek added the WaitingForInfo label Jul 14, 2022
@eikenb
Copy link
Author

@eikenb eikenb commented Jul 14, 2022

I do have the "Minimum font size" set to 16 in the settings. But no extensions or customizations that change it otherwise.

I interpret the final comments indicate that the patch discussed should be live. If so then it didn't work. The problem remains.

Played with the settings a bit. If I set "Minimum font size" to None (the default) the problem is fixed. So that seems the primary cause.

@mknyszek
Copy link
Contributor

@mknyszek mknyszek commented Jul 14, 2022

Got it. And yeah, it's indeed live.

Poking around the internet, this looks like it might be a bug in how Firefox renders SVGs? https://stackoverflow.com/questions/55926730/how-to-override-minimum-font-size-in-firefox-affecting-text-within-svg

According to the thread at marionebl/svg-term-cli#39 (comment), it looks like setting text-rendering="geometricPrecision" on parent elements might fix it.

The upstream bug at https://bugzilla.mozilla.org/show_bug.cgi?id=935056 was closed as "won't fix" so I guess this just needs to be explicitly supported. Sigh.

@mknyszek mknyszek removed the WaitingForInfo label Jul 14, 2022
@mknyszek
Copy link
Contributor

@mknyszek mknyszek commented Jul 14, 2022

OK no, testing locally that doesn't actually fix it (and now I can reproduce!).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
NeedsInvestigation
Projects
None yet
Development

No branches or pull requests

5 participants