Cell results are progressively shifted further down until they're unreadable, in Firefox

Feedback
1

Chromium left, Firefox right:

Firefox and Chrome side by side
Firefox and Chrome side by side1366×768 115 KB

In Firefox, any code cells’ top part containing the result are progressively more squashed further down the page, until they’re unreadable and unclickable. The text in text cells is also progressively more shifted down from the middle where it should be.

This is just the Introduction to Code notebook, but the same happens with any notebook.

Is every other Firefox user seeing this too, or is my setup funny somehow?

$ chromium --version
Chromium 72.0.3626.121 Arch Linux
$ firefox --version
Mozilla Firefox 65.0.2
2

I’m not seeing this on my macBook. Do you have any extensions active in Firefox that might be changing the style of the page?

FYI here’s how notebooks are laid out on Observable’s site: the “output” of each of the cells is placed in div elements in an iframe and each of the editor cells containing the source code lies in div elements which overlay the iframe. It looks to me like something might be changing the spacing between output divs in the iframe.

You could take a look at the “Box Model” diagrams in the “Inspector” in Firefox’s dev tools and compare them to the corresponding diagrams in “Computed” under “Elements” in Chrome’s dev tools to see what’s different (i.e. are the padding or margins larger in Firefox than in Chrome?). You may even be able to see if there are any custom style sheets active from there as well.

1 Like
3

This also reminds me of the single-pixel padding that isn’t part of the regular margin or padding setting that you can get with some display values but not others - like block elements compared to flexbox elements. Don’t remember the precise details, it’s been a while since I had to deal with those subtleties, so I can’t say if it is consistent across browsers or relevant here.

4

This happens frequently in Safari, and sometimes in Firefox. The workaround is to reload the page (sometimes twice).

5

tldr I had some old custom userChrome lying around breaking things. What follows is my odyssey of figuring that out.

Indeed with Firefox in Safe Mode (extensions disabled), everything renders correctly.

According to Firefox’s help page on Safe Mode,

If the problem does not happen in Safe Mode, it is most likely because of an extension, theme or hardware acceleration.

So I started going down their recommended list:

  • I tried disabling all of my extensions manually.
    → :x: Nope, still rendering wrong.

  • I tried turning off hardware acceleration.
    → :x: Nope, still rendering wrong.

  • I tried switching to the default theme.
    → :x: No difference.

  • I tried turning off Firefox’s built-in Content Blocking.
    → :x: No difference.

No cake. Then I found a Community Support post with more detail:

Firefox Safe Mode also: […]

  • Disables the userChrome.css and userContent.css customization files

Oh. That sounds like something I might do! :fearful:

  • Sure enough I found my beautiful scrollbar mod in ~/.mozilla/firefox/<profile_id>/chrome, and moved it elsewhere.
    → :white_check_mark: Everything works.

My scrollbars are less beautiful, but form follows function.

I feel dumb. Thanks for your time!

4 Likes
6

With reference to my previous comment where I narrowed this down to a very specific userChrome customisation, I think your issue is likely something different?

7

Wow, glad you were able to figure it out! Thanks for typing out what you did; it’ll probably be helpful for future searchers.

1 Like