Misalignment of source cells in Firefox when divs have non-integer px heights

Community Help
1

Here’s an example:

This is what I see at the bottom of the page in Firefox (things render fine in Chrome / Safari):

28
Screenshot 2019-06-04 19.13.28.png944×576 19.5 KB

When I look at the sizes of the divs in Firefox, the cell outputs are 127.5px high, but Observable expects them to be 128px (I’m reading this from the padding-top attribute of the div containing the corresponding source editor). In Chrome, the cell heights are 127px and Observable is making the padding-top of the source editor cells 127px so everything looks fine.

If I manually set the height of the outermost div to an integer then everything is aligned, but then I’d have to calculate the height of these divs, right? Is there an easier solution?

The problem also goes away if I set the header text to an empty string (more generally, if I have an even number of lines in the header), but I’d rather not have to fiddle with things that way.

(There’s an older thread with a similar issue, but the cause there was apparently some custom user styles.)

2

The good news: For the above CodeMirror example (and the draft notebook it’s based on), the following hack seems to work:

  setTimeout(() => {
    editor.setSize('100%', '100');
    editor.refresh();
    div.style.height = div.clientHeight + 'px'; /* added this line */
  }, 0);

Setting the height of that div manually like this seems to work because clientHeight is rounded to an integer. Also, this doesn’t cost much since I already had the setTimeout call.

The bad news: It turns out even the built-in md function often generates HTML elements with non-integer px heights:

Still hoping there’s some easy fix I’m missing…

3

An update: I was using a variant of the above hack in my Lean editor notebook but it turns out to cause problems of its own so I’ve just removed it.

I’m guessing this is low-priority but it’d still be nice to see a fix.

4

Thanks for the bump. I have a hunch on how we can fix this. I’ve filed a new issue on our internal tracker and I’ll see if we can make some progress soon.

3 Likes
5

Any update on this? (Is it OK to bump such topics?)

1 Like
6

This seems to be fixed, at least in Firefox 75 on macOS.

1 Like
7

Yes, we finally deployed a fix for this! Apologies for taking so long, and thanks for the report.

1 Like