Docs issue (perhaps related to codemirror)

This is happening on https://runkit.com/docs/await. Line 2 in the first code snippet is jumpy: it breaks to 2 lines and goes back to being one line. Not sure if my description adequately conveys what happens, so here is a screen cast: https://streamable.com/3xg9h

I think it’s our fault not CodeMirror’s. I believe this is due to this weird height-calculation bug we have (determining the height of the embed is slightly off because for some reason browsers report the wrong size of a few SVGs). This causes the scroll bar to show up, which in turn shrinks editor area, causing the string to wrap. I’ll try to take a look at it in the next couple of days and see if I can’t get a definitive solution once and for all. Sorry for the annoyance!

As a temporary workaround I set the overflow-y to scroll on the div in console and that took care of the jumpiness.

Unfortunately, this causes the vertical scroll bar to be visible when it really is not necessary, but as a workaround I found this to be adequate.

I tested yet another hot css injection. The snippets are contained in iframe elements and we can add this:

::-webkit-scrollbar {
    width: 0;
}

And the scrollbar will vanish :slight_smile:.

Hi I believe we have fixed this, could you check to see if you are still experiencing this issue?

Thanks,

Francisco

I’m afraid it’s not. I have cleared browser cache and still the same in Google Chrome. In Firefox the line wraps with no issue. But I didn’t check with Firefox initially and cannot say there is a change, or it was OK already.

Here is more info:

  • Browser: Google Chrome Version 59.0.3071.115 (Official Build) (64-bit)
  • OS: Ubuntu 16.04
  • window.innerWidth = 1366

Hi majid4466,

I’ll try to try this on Ubuntu soon and report back, sorry for the annoyance!

Thanks,

Francisco