Display Anomaly - Maybe bug ?

Hi all,

I’ve noticed a strange display anomaly over the last few days. After about 20 cells, the cell output gradually lowers and dispappears behind the cell input. See notebook and snaphot below. The problem appears on several notebook so it does not seem connected to that one in particular. My browser is Chrome. Is this issue known ? a bug ?

Are you using your browser’s page zoom feature, by chance?

Yes, I am/was.
With 100%, all is back to normal.
Now I know !

I keep having this issue when working on larger notebooks. Sometimes it is even worse - the top of the cell is totally covered by the previous cell.

Scroll down to the end of this notebook you will see the ‘Font’ section is one-third covered by the previous cell. Notebook:

https://observablehq.com/@analyzer2004/3d-treemap

Thanks :grinning:

2 Likes

@analyzer2004 when I open your notebook, all is normal. The ‘Font’ section is visible.
So it must be your browser config somehow. Have you tried to reset the zoom to 100% ?

So this is a problem I’ve seen from time-to-time that I haven’t been able to repro reliably enough to report (so I’m glad other people are seeing it!).

When I’m working in a notebook and I have multiple tabs open, sometimes when I leave a notebook tab and come back to it later, the alignment between code cells and the iframed cell themselves get out of whack. It looks like this screenshot. When I refresh it goes back to normal, but it’s pretty annoying. It happens even when my page zoom is at 100%. It’s typically when I’m working on 2 notebook at the same time and I’m constantly switching between tabs.

I know it’s not the best bug report, but. I’m glad that other people see this too!

Interesting…
Can you let us know what browser and OS you are using? And just in case you have seen this happen on other browsers, we would love to know that, too. Thanks.


I have seen that too in chrome but when I load the page into firefox it displays correctly. Chrome on win10 Version 88.0.4324.146 (Official Build) (64-bit)
Page not zoomed it.

NZ Regions Nitrate levels from animals. / Brett Cooper / Observable << most noticeable at the bottom as the bottom-margin seems to creep over the next cell.

When I play with the page in devtools, adjusting the Cell before (in this case the search) to have a style margin-bottom of 60px instead of 50px makes the table look normal.

Using devtools and reloading the page into image
Also looks fine. Even forcing the screen size to 1920×1080 works fine.

My Browser resolution is 2560x1440
Which makes me think it could be the windows DPI setting as the monitor resolution is 3840x2160. I think the windows scaling factor is 144
image

Loading the page on my 2nd 1080p monitor it displays fine.
AND when I set my 4k monitor to 100% scaling instead of 150% every displayed fine (but very tiny).

I think P5 has a way of detecting pixel density, not sure if that would help here.

And if I zoom out to set the browser scale at 90% it renders the page fine.

TIP: If getting a 4k monitor get one that’s at least 32" so the display doesn’t need to be scaled to read the text.

1 Like

Ugh! Windows scaling is so tricky! Can you check one more thing, please? Can you try with 150% scaling on the Edge browser? I have seen Chrome have issues with this scaling, but Edge working in some cases.

Nooo, don’t make me install edge :sob:, ok I did it and it fails to render right there too.

Firefox works fine with the 150% scaling, so I think it’s a chrome issue.

1 Like

OK, thanks for the info.

1 Like

I am having the same problem

Last week I could load Observable using Chrome and Chromium on Ubuntu 14.04m suddenly at the weekend it would only display the first couple of cells and nothing in the main body of the notebook

I then tried loading it with Firefox and it was OK, however it seems that there is a so-called classic version of the notebook which loads a notebook occasionally in Chrome / Chromium

1] Can anyone explain what this “classic” version does

I also discovered that if you load the notebook in "safe"mode it also seems to disable the notebook [far right hand side ser of boxes marked by three little dots , third after the ‘fork’ symbol and the 'heart’synbol

This issue is caused sometimes for me when a CSS stylesheet that changes the height of content gets loaded after other cells that the stylesheet affects. Then the platform ends up calculating the height before the style is applied and not updating it. The workaround I do in my notebooks is to make sure that the stylesheet cell is a dependency of other cells that get styled. For instance I change the font size to make rendered LaTeX math match other text, and import that into my notebooks by making two cells like:

$css = html`${math_css}`
import {math_css, $, $$} with {$css as $css} from '@jrus/misc'

Over at the @jrus/misc notebook the $ and $$ cells both depend on $css, ensuring that cells which use them do not render until the style is loaded.

I think this is a different problem than the one being discussed in this thread.

only display the first couple of cells and nothing in the main body of the notebook

I get similar behavior sometimes when there is another notebook open somewhere which is stuck in an infinite javascript loop or something. Killing browser processes on my computer which are using large amounts of CPU tends to fix it. (This might be a different issue from what you are experiencing though.)

Can anyone explain what this “classic” version does

There are currently 2 versions of the notebook interface, a beta “next” version which supports simultaneous editing by multiple people, and the previous “classic” version which does not. The “next” interface will probably eventually become the only interface, but it is not quite yet feature-complete and still has some bugs to work out, so in the mean time the platform makes both versions available.

1 Like