Describe the bug

I assume the change in #4996 results in a different calculation of line heights. Since 1.13.1 (I confirmed 1.13.0 does not have this issue) the line heights are incorrect and result in the text being smashed together. Manually requesting a browser zoom in or out will re-render the lines correctly.

Expected Behavior

Previously in 1.13.0 this rendered correctly.

Current Behavior

Here's an example of the initial display:

Reproduction Steps

I'm mounting this within a Vue.js component but it's pretty straightforward except perhaps it's running on the mounted life cycle method. Not sure if that's resulting in a browser environment that can't figure out the proper line height?

<template> 
 <pre id="editor"></pre>
</template>

<script>
import * as ace from 'ace-builds'
import 'ace-builds/src-min-noconflict/mode-text'
import 'ace-builds/src-min-noconflict/theme-twilight'
import 'ace-builds/src-min-noconflict/ext-language_tools'
import 'ace-builds/src-min-noconflict/ext-searchbox'
export default {
  mounted: function () {
    this.editor = ace.edit('editor')
    this.editor.setTheme('ace/theme/twilight')
    this.editor.setValue(this.definition)
    this.editor.clearSelection()
    this.editor.focus()
  },
}
</script>
<style scoped>
#editor {
  height: 50vh;
  width: 75vw;
  position: relative;
  font-size: 16px;
}
</style>

Possible Solution

No response

Additional Information/Context

Vue mounted lifecycle hook says:

A component is considered mounted after:

All of its synchronous child components have been mounted (does not include async components or components inside trees).

Its own DOM tree has been created and inserted into the parent container. Note it only guarantees that the component's DOM tree is in-document if the application's root container is also in-document.

This hook is typically used for performing side effects that need access to the component's rendered DOM

Ace Version / Browser / OS / Keyboard layout

1.13.1 / Chrome (107.0.5304.87) / Mac OS 13 / Querty