Rendering error when resizing during render()

start index of line is greater than the end index This error occurs when the size of the rendering area is changed during browser rendering. And mobile phone rendering also has this error, I think it is similar to #373, is there any good solution?

[JanVeb]

Do you really have to resize osmd during rendering? you could easily set desired osmd zoom before calling rendering

osmd.zoom = 2
osmd.render();

Also instead of resizing osmd you could resize its parent div:

transformOrigin: '0% 0% 0px',
transform: osmdSizeTrans,

This way resizing is almost instant and you don’t have to call osmd.render(); afterwards. Just keep in mind that osmdSizeTrans has to be state variable in order to update ui when it changes. Also afterwards if you need osmd width for example, you get it by multiplying osmd width with osmdSizeTrans

let scaleScoreWidth = document.getElementById('osmdSvgPage1').width.animVal.valueInSpecifiedUnits
  setScoreWidth(scaleScoreWidth * osmdSizeTrans)

etc

https://user-images.githubusercontent.com/93236084/187059594-c729a984-78f3-403c-a5ca-b766bb7c3f32.mp4

[sschmidTU]

Yes, ideally OSMD should not be resized during rendering. You could also turn off the autoResize option. osmd.setOptions({autoResize: false})