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

firefox docs.rs not displaying correctly #1669

Closed
Dowwie opened this issue Feb 9, 2022 · 28 comments · Fixed by #1711
Closed

firefox docs.rs not displaying correctly #1669

Dowwie opened this issue Feb 9, 2022 · 28 comments · Fixed by #1711

Comments

@Dowwie
Copy link

Dowwie commented Feb 9, 2022

I'm using a macbook pro and noticed that Firefox isn't displaying docs.rs correctly:

page in Firefox v97.0:
image

page in Chrome:
Screen Shot 2022-02-09 at 11 46 05 AM

@syphar
Copy link
Member

syphar commented Feb 9, 2022

Which URL are you using?

Looking at https://docs.rs/actix-web/latest/actix_web/ it looks good to me ( Also firefox 97 on Mac OS):

grafik

@Dowwie
Copy link
Author

Dowwie commented Feb 9, 2022

The link you provided to me yields the same issue. Note that this behavior repeats for most other docs.rs pages except standard library! No issues at all with the standard library docs.

@Nemo157
Copy link
Member

Nemo157 commented Feb 9, 2022

Seems like rust-lang/rust#93171 which should have been fixed by #1614.

@syphar
Copy link
Member

syphar commented Feb 10, 2022

So it could be related to the minimum font-size set?

@Dowwie what did you set?

Perhaps it's the browser cache? ( even though the file has a hashed filename)

@Dowwie
Copy link
Author

Dowwie commented Feb 10, 2022

@syphar A-ha! It was my browser's default font size setting: 16. The older I get, the larger my font size. Eventually, my fonts will be dragging on the floor.

The moment I reduced the font size, the issue went away.

Thanks, everyone.

@syphar
Copy link
Member

syphar commented Feb 10, 2022

now it gets interesting: when I just change default font size, I cannot reproduce the issue.

When I increase minimum font size to something >= 16, I can reproduce this issue.

@jsha @GuillaumeGomez is this something that we want/can handle?

@GuillaumeGomez
Copy link
Member

I'd say no but for accessibility things, I don't know much so let's see what @jsha thinks.

@jsha
Copy link
Contributor

jsha commented Feb 10, 2022 via email

@mitsuhiko
Copy link

The footer also incorrectly displays for me on Firefox:

image

@GuillaumeGomez
Copy link
Member

@mitsuhiko The fix was just merged: #1619. Needs to be deployed now.

@syphar
Copy link
Member

syphar commented Feb 13, 2022

I just deployed the fix

@Dowwie
Copy link
Author

Dowwie commented Feb 17, 2022

The fix resolved the issue that I raised. Not sure whether to close this just yet. @mitsuhiko Looks good on your side?

@aslpavel
Copy link

aslpavel commented Mar 11, 2022

It seems to be broken again. Looks the same as on initial screenshot. All the text is squished before "Release" tab.
Firefox 98

@syphar
Copy link
Member

syphar commented Mar 12, 2022

@aslpavel it looks good on my computer, which crate & release are you looking at? Also axum/latest?

@aslpavel
Copy link

aslpavel commented Mar 12, 2022

  • All the docs at doc.rs look like that
    2022-03-12T10:52:36,410102655+00:00

  • I'm not a web developer but that looks suspicious
    2022-03-12T10:54:27,502536817+00:00

  • Removing this limit or/and setting flex-shrink: 0 makes things better but not perfect
    2022-03-12T10:58:26,219658297+00:00

  • This looks identical with chromium too

  • My machine is:

    • ArchLinux
    • Sway VM/Wayland
    • HIDPI screen with 2x scaling 3840x2400

@GuillaumeGomez
Copy link
Member

I can't reproduce the bug on ubuntu 21.04 (firefox 98, chrome 98).

@aslpavel
Copy link

aslpavel commented Mar 14, 2022

If there is an additional information that I can provide to debug this, I'm happy to help

  • I've tried starting firefox with new profile, result is the same
  • Identical result with gnome + X11
  • tried disabling scaling to no avail
  • chromium screenshot, just in case (broken too)
    2022-03-14T21:45:53,549299729+00:00
  • there definitely some issue with flex-box
    2022-03-14T21:54:41,499101683+00:00

@GuillaumeGomez
Copy link
Member

Still looks good to me... Maybe the screen size is what's triggering the issue? In any case, cc @jsha

@jsha
Copy link
Contributor

jsha commented Mar 15, 2022

That's quite strange indeed. I also can't reproduce on Ubuntu 21, with Firefox or Chrome (latest of both).

The thing that sticks out to me in these screenshots is that the "Releases" (and similar) menu items are missing a lower bar, as if they are just slightly too big - the same symptoms we saw previously, which we fixed by making the menu bar font sizes not responsive to the user's font size.

I wonder if it's possible this is an Arch vs Ubuntu thing? Like, could the fonts be slightly different on Arch? That would be surprising, since docs.rs brings all its own fonts.

Could you get the computed styles for the "Releases" menu heading? Here's what mine look like:

image

Also, could you attach a screenshot of your font settings in FF?

image

image

@aslpavel
Copy link

I've tested everything now on my fedora machine with clean firefox profile:

  • Here is requested "Release Computed Properties"
    Screenshot from 2022-03-15 13-03-00
  • Fonts settings look identical to yours

But I did find something that effects the results

  • looking at computed properties, first font in the list is "Fira Sans"
  • I do have it available on the machine
$ fc-match "Fira Sans"
fira-sans.ttf: "Fira Sans" "Regular"
  • When I remove it everything renders as expected
  • I have no idea why availability of the font effects layout so drastically! Ideally font should not a effect layout at all

@GuillaumeGomez
Copy link
Member

That is very surprising indeed...

@jsha
Copy link
Contributor

jsha commented Mar 15, 2022

Ah, excellent, now we have a lead! What package did you get fira-sans.ttf from? Presumably if we install it locally we'll be able to reproduce.

I have no idea why availability of the font effects layout so drastically! Ideally font should not a effect layout at all

The issue is that in some situations parts of the top bar are exceeding their bounds, which is affecting the layout below in surprising ways. I thought we had this additionally handled with an overflow property on the navbar, but I can't find it now. At any rate, once I have the font and can reproduce I suspect it will be quick to find the right fix.

@aslpavel
Copy link

  • Apparently I'm using some old version of fira-sans.ttf which probably have fewer symbols, I cannot tell for sure which version it is.
  • You can probably testing it by temporarily placing in in $HOME/.local/share/fonts and running fc-cache -rv.
  • I understand that is not ideal but it should help with debugging.
  • Or alternatively you can request more info from me which I'm happy to provide

@Nemo157
Copy link
Member

Nemo157 commented Mar 15, 2022

Reminds me a little of rust-lang/rust#38164, but I'd really prefer not to force webfont usage if the font is already available locally.

@aslpavel
Copy link

Well it would be ok if I had some missing/badly rendered symbols. But this font breaks layout of the whole page.

@GuillaumeGomez
Copy link
Member

Like @jsha already wrote, we suspect a missing overflow: hidden in the docs.rs top bar.

@jam1garner
Copy link

Copying some additional data from my comment here: rust-lang/rust#93171 (comment)

  • Firefox 92.0
  • Ubuntu 20.04
  • 1920x1080 screen, firefox at half width (roughly 960x1080 including window decorations), eg vertical orientation
  • Occurs even with the font fix present

So it seems like screen size and orientation definitely plays a factor.


Also since this issue won't magically go away due to older crates/versions not getting CSS updates, here's some hacky client-side fixes for those who need them:

UBlock Origin Filter

Add under UBlock -> dashboard (the gears icon) -> "My Filters" tab

docs.rs###rustdoc_body_wrapper:style(width: 100% !important;)

Built-in Firefox Userstyles (Untested, @ me if it works and I'll edit this)

@-moz-document domain(docs.rs) {
    #rustdoc_body_wrapper {
        width: 100% !important;
    }
}

(More info on how to add)

@jsha
Copy link
Contributor

jsha commented Apr 9, 2022 via email

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

Successfully merging a pull request may close this issue.

8 participants