React-ace: Editor line-height 'pops' after loading.

[viridia]

Problem

When the editor first loads, the lines of text are vertically squished as if the line-height property were set to about half the normal value. After about 1/2 a second, the editor repaints and the lines look normal.

I've attempted to work around this in a bunch of ways (explicitly setting line-height in the css for example) and none of my efforts have had any effect.

This is mainly a cosmetic issue, it doesn't affect editor functionality but it does look unsightly.

Here are two screen shots showing what it looks like before and after the pop:

Sample code to reproduce your issue

My editor configuration is fairly minimal, the only thing unusual is that I'm using percentages for width and height:

<AceEditor
  mode={mode}
  theme="twilight"
  width="100%"
  height="100%"
  focus
  tabSize={2}
  ref={el => { this.editor = el; }}
  editorProps={{ $blockScrolling: true }} />

[fumblehool]

@securingsincity Is it still open? Can I work on this one?

[kaiyoma]

I'm running into this as well and it's a bit unsightly as the contents of the editor can change frequently/easily and the line height "pops" every time. Will this be fixed soon?

[samratshaw]

This is due to the fact that the line height is being calculated at run time.
Till the time the actual fix is rolled out, you can use the below hack.

Override the .ace_line css class with the minimum height that your code block is expected to render.

You can see what is the actual height that your editor is rendering using developer tools.
Use this as minHeight inside the overriden .ace_line class.

[fomentia]

Any word on if this will actually be fixed? Still seeing it.