문제

편집기가 처음 로드될 때 line-height 속성이 정상 값의 약 절반으로 설정된 것처럼 텍스트 줄이 세로로 찌그러집니다. 약 1/2초 후에 편집기가 다시 그려지고 선이 정상적으로 보입니다.

나는 여러 가지 방법으로 이 문제를 해결하려고 시도했지만(예를 들어 CSS에서 명시적으로 줄 높이 설정) 내 노력 중 아무 효과도 없었습니다.

이것은 주로 외관상의 문제이며 편집기 기능에는 영향을 미치지 않지만 보기 흉하게 보입니다.

다음은 팝업 전후의 모습을 보여주는 두 개의 스크린샷입니다.

문제를 재현하기 위한 샘플 코드

내 편집기 구성은 상당히 최소한이며, 유일한 특이한 점은 너비와 높이에 백분율을 사용하고 있다는 것입니다.

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