Readthedocs.org: build results page is broken in Firefox

[chadwhitacre]

Details

• Project URL: http://gratipay.readthedocs.io/
• Build URL (if applicable): https://readthedocs.org/projects/gratipay/builds/4082966/
• Read the Docs username (if applicable): whit537
• Environment: Firefox 46 on Mac OS
  

  Expected Result

Helpful build output (similar to Travis, etc.).

Actual Result

Cryptic build output:

[chadwhitacre]

If I click on the Morse code, I do get some log output:

[chadwhitacre]

Killing the margin-bottom on .build-command-run span turns the Morse code into ASCII. :)

[chadwhitacre]

Looks fine in Chrome.

[agjohnson]

There might be an issue for this already, but yes, this seems to only affect firefox for whatever reason. I don't fully understand why margin-bottom reduces the line-height to nothing here, but if it works, feel free to send over a PR. I can test more later, I'll want to verify it doesn't cause problems on other browsers as well.

[shubheksha]

@agjohnson - I've made the proposed fix, but I am unsure regarding how to test it locally. Could you please guide me a little so that I can submit a PR?

[agjohnson]

@shubheksha sure thing! have you hit any particular problem getting set up? We have install docs available at:
http://docs.readthedocs.io/en/latest/install.html

The above change breaks in Chrome on OSX, so I'm mostly concerned that we test other browsers with a fix for this issue.

If you're stuck on installation, feel free to open up a PR, I'm happy to take a look.

[shubheksha]

@agjohnson, I've a local installation up & running, didn't face any issues with it!
I've removed the specified CSS property so that it works on Firefox, but I am unsure how can I locally test changes to ensure that it doesn't break in other browsers on a different OS before submitting a PR. Or should I go ahead & submit it anyway?

[agjohnson]

Yeah, feel free to submit a PR, I can follow up there. I use SauceLabs + ngrok to test design changes against major browsers. I'm already set up for testing here, I can try to provide some feedback if you don't have any way to test Chrome/Safari/etc

[benjaoming]

On FF 49, current master branch displays like this, which looks fine? I mean, maybe 2 pixels are missing...

[jaraco]

On FF 49, current master branch displays like this...

@benjaoming That's interesting that apparently it was working on Firefox for some unreleased version. I still have the rendering issue on FF 53 (Mac). Can you confirm you have the issue as well on released versions of FF?

[jaraco]

I've ended up installing this greasemonkey script to fix the issue for me locally:

// ==UserScript==
// @name        Fix RTD 2261
// @namespace   fix-rtd-2261
// @include     https://readthedocs.org/projects/*/builds/*
// @version     1
// @grant       GM_addStyle
// ==/UserScript==

GM_addStyle("div.build-command div.build-command-run > span, div.build-command div.build-command-output > span { margin-bottom: 0 }");

[benjaoming]

Can you confirm you have the issue as well on released versions of FF?

@jaraco being a regular user of RTD, looking at the build status page, I haven't seen the issue show up since back when I wrote about FF49 in November '16. I'm now using FF53 and had all the intermediate releases.

[jaraco]

Confirmed. I loaded a clean install of Firefox on my Windows partition and it renders the build status page just fine. So now the question is - what is it about my legacy install that's continuing to render the page unreadable? I suppose I may never know, but perhaps an uninstall/reinstall will help (I'm guessing not because it will likely re-use the settings after reinstall, but it's worth a try).

[benjaoming]

@jaraco - not sure if it is feasible to persue this any further. You could try to refresh all the assets as well. In Firefox, it's typically SHIFT+F5 to completely reload a page.

[benjaoming]

You could also try to restart your FF without Extensions?

[jaraco]

Restarting with Add-Ons disabled doesn't help - still renders improperly. There's another option when restarting that will Refresh Firefox. I'll try that.

[jaraco]

Refresh Firefox did not help (though it did wipe out my Greasemonkey user scripts).

[hwine]

I can reproduce the improper rendering on both FF 56 (currently "Nightly") and FF 55 (current "Beta") with fresh installs & profiles (i.e. no extensions or history)

I also opened webcompat/web-bugs#8626 in the hopes a guru can help with a solution.

[karlcow]

There is a recommended solution here
https://github.com/webcompat/web-bugs/issues/8626#issuecomment-320273328

overflow: hidden seems to have been hidden, but the

• margin-bottom: -16px
• display: block;

needs to be removed.

div.build-command div.build-command-run > span, div.build-command div.build-command-output > span {
    /* display: block; */
    /* margin-bottom: -16px; */
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    white-space: pre;
    overflow-x: scroll;
    overflow-y: hidden;
}

with these modifications (left on Gecko, right on Blink):

[stevekm]

Still broken in Firefox 57 as well

source page

[hwine]

@stevekm unfortunately, afaik no one has created a PR yet.

@karlcow do you have any concerns about a non-js-dev applying your fix blindly? I.e. is it as simple as it looks?

[jaraco]

no one has created a PR yet.

Please see #2630.

[hwine]

Thanks @jaraco! If folks want to add a reaction to my nudge on #2630, that might be the best way to show support.

[jaraco]

From this comment:

FF quantum looks as I would expect

Weird that occasionally people report new builds of Firefox not having this issue. Yet at the same time those Firefox versions aren't working for others. Here are screenshots illustrating that the issue persists on my install of Firefox 57 (aka Quantum).

Interestingly, opening RTD on my Windows box (FF 57 upgraded from clean install of 56), I don't see the issue.

[jaraco]

A clean install of Firefox 57 on another mac VM also doesn't exhibit the issue.

[jaraco]

Yet, even when running Firefox on my main workstation in a brand-new clean profile, the issue persists.

[benjaoming]

Might be a randomly occurring issue in Firefox' rendering engine. So instead of looking for errors in the CSS/JS code, we should find an entirely different way of displaying these message boxes?

[jaraco]

Yes, maybe. For completeness, I tried more troubleshooting steps to attempt to get a proper rendering on my workstation. Unfortunately, I was unable to get Firefox to render the page properly in any of these scenarios:

1. Run in safe mode.
2. Run in a new, clean profile.
3. Remove and reinstall Firefox.
4. Create a new user account on the mac and run from there.

Surprising that (4) doesn't render properly but running in a clean install on a VM does.

[jaraco]

Might be a randomly occurring issue

I should say, though, the rendering has never worked for me on this machine except when the Greasemonkey hack is in place.

[jaraco]

I should say too, the Greasemonkey hack doesn't seem to be working either, probably due to the GM4 update.

I did try uninstalling Adobe Acrobat and Adobe Flash Player, since those likely would have installed system-wide behavior, but even after removing those, the page continues to render improperly.

[stevekm]

Like jaraco mentioned, this has never appeared to be 'random' for me, it's never worked in any version of Firefox on any Mac I've tried