Incomplete rendering issues when upgrading from codemirror/view 6.35.0 to 6.41.0 #1700

Closed
opened 2026-05-06 02:53:14 +02:00 by mrjo118 · 7 comments

The Joplin mobile app currently uses the CodeMirror 6 editor. When upgrading codemirror/view from 6.35.0 to 6.41.0 (see diff on this PR for the related dependency updated https://github.com/laurent22/joplin/pull/15007), this results in a rendering issue which frequently occurs when scrolling slowly on large notes. See the attached video. The note data was anonymized for privacy reasons, which makes it difficult to read. But when looking carefully it looks like when the rendering does occur after the white area, the scroll position also jumps a bit and is not in the position where it should be.

EDIT: After testing a few versions of codemirror/view, I'm unable to reproduce the issue in v6.38.8, but I can in v6.39.17

The Joplin mobile app currently uses the CodeMirror 6 editor. When upgrading codemirror/view from 6.35.0 to 6.41.0 (see diff on this PR for the related dependency updated https://github.com/laurent22/joplin/pull/15007), this results in a rendering issue which frequently occurs when scrolling slowly on large notes. See the attached video. The note data was anonymized for privacy reasons, which makes it difficult to read. But when looking carefully it looks like when the rendering does occur after the white area, the scroll position also jumps a bit and is not in the position where it should be. EDIT: After testing a few versions of codemirror/view, I'm unable to reproduce the issue in v6.38.8, but I can in v6.39.17
Owner

Are you able to reproduce this outside of your system, in a simpler setup? That would help a lot in narrowing down what causes it and whether it's something the Joplin code is doing.

Are you able to reproduce this outside of your system, in a simpler setup? That would help a lot in narrowing down what causes it and whether it's something the Joplin code is doing.
Author

That's quite a big ask, as I didn't write the code for the CodeMirror integration in Joplin. But I can try to narrow it down to the exact version of codemirror/view where the issue starts happening, if that would help?

That's quite a big ask, as I didn't write the code for the CodeMirror integration in Joplin. But I can try to narrow it down to the exact version of codemirror/view where the issue starts happening, if that would help?
Owner

It might, let's see. But if it doesn't, allow me to point out that it's an even bigger ask from you to expect me to debug 3rd-party code.

It might, let's see. But if it doesn't, allow me to point out that it's an even bigger ask from you to expect me to debug 3rd-party code.

I'm able to reproduce the issue by:

  1. Opening this CodeMirror try-it editor.
    • The editor uses a sans-serif font and line wrapping.
  2. Pasting the output.txt file provided by @mrjo118 in https://github.com/laurent22/joplin/issues/15141.
  3. Scrolling.
  4. Repeating step 3 until the issue occurs.

See the downstream issue for a screen recording of the issue in the try-it editor.

Another contributor (in this downstream pull request) has narrowed the issue down to one of the changes between @codemirror/view 6.39.9 and 6.39.10.

Thank you everyone for looking into this!

I'm able to reproduce the issue by: 1. Opening [this CodeMirror try-it](https://codemirror.net/try/#c=aW1wb3J0IHtiYXNpY1NldHVwLCBFZGl0b3JWaWV3fSBmcm9tICJjb2RlbWlycm9yIgppbXBvcnQge21hcmtkb3dufSBmcm9tICJAY29kZW1pcnJvci9sYW5nLW1hcmtkb3duIgppbXBvcnQge2xhbmd1YWdlc30gZnJvbSAiQGNvZGVtaXJyb3IvbGFuZ3VhZ2UtZGF0YSIKCm5ldyBFZGl0b3JWaWV3KHsKICBkb2M6ICd7UmVwbGFjZSBtZSF9JywKICBleHRlbnNpb25zOiBbCiAgICBtYXJrZG93bih7Y29kZUxhbmd1YWdlczogbGFuZ3VhZ2VzfSksCiAgICBFZGl0b3JWaWV3LmxpbmVXcmFwcGluZywKICAgIEVkaXRvclZpZXcuYmFzZVRoZW1lKHsKICAgICAgJyYgLmNtLWNvbnRlbnQnOiB7CiAgICAgICAgJ2ZvbnQtZmFtaWx5JzogJ3NhbnMtc2VyaWYnCiAgICAgIH0KICAgIH0pCiAgXSwKICBwYXJlbnQ6IGRvY3VtZW50LmJvZHkKfSkK) editor. - The editor uses a sans-serif font and line wrapping. 2. Pasting the `output.txt` file provided by @mrjo118 in https://github.com/laurent22/joplin/issues/15141. 3. Scrolling. 4. Repeating step 3 until the issue occurs. See the [downstream issue](https://github.com/laurent22/joplin/issues/15141#issuecomment-4392279478) for a screen recording of the issue in the try-it editor. Another contributor ([in this downstream pull request](https://github.com/laurent22/joplin/pull/15283)) has narrowed the issue down to one of the changes between [`@codemirror/view` 6.39.9 and 6.39.10](https://code.haverbeke.berlin/codemirror/view/compare/6.39.9..6.39.10). Thank you everyone for looking into this!

Update: I think the issue is related to ff312713bde1cc795468ded4a767b9ce5c59e53a: If I upgrade Joplin's editor to @codemirror/view v6.39.10, but revert 6.39.10's changes to heightmap.ts, the issue doesn't seem to occur.

Update: I think the issue is related to [ff312713bde1cc795468ded4a767b9ce5c59e53a](https://code.haverbeke.berlin/codemirror/view/commit/ff312713bde1cc795468ded4a767b9ce5c59e53a): If I upgrade Joplin's editor to `@codemirror/view` v6.39.10, but revert 6.39.10's changes to `heightmap.ts`, the issue doesn't seem to occur.
Author

@personalizedrefrigerator wrote in #1700 (comment):

Update: I think the issue is related to ff312713bde1cc795468ded4a767b9ce5c59e53a: If I upgrade Joplin's editor to @codemirror/view v6.39.10, but revert 6.39.10's changes to heightmap.ts, the issue doesn't seem to occur.

Judging from that code, I guess a fix could be to add || Math.round(lineHeight) != Math.round(this.lineHeight) back in from the original conditions?

@personalizedrefrigerator wrote in https://code.haverbeke.berlin/codemirror/dev/issues/1700#issuecomment-69930: > Update: I think the issue is related to [ff312713bde1cc795468ded4a767b9ce5c59e53a](https://code.haverbeke.berlin/codemirror/view/commit/ff312713bde1cc795468ded4a767b9ce5c59e53a): If I upgrade Joplin's editor to `@codemirror/view` v6.39.10, but revert 6.39.10's changes to `heightmap.ts`, the issue doesn't seem to occur. Judging from that code, I guess a fix could be to add `|| Math.round(lineHeight) != Math.round(this.lineHeight)` back in from the original conditions?
Owner

Patch codemirror/view@7d2c53e697 should fix this. It was related to the way character width is measured, which isn't stable for variable-width fonts, leading to a lot of unnecessary geometry resets.

Patch https://code.haverbeke.berlin/codemirror/view/commit/7d2c53e6973c96c943081f7e8952068d1ba9f2a4 should fix this. It was related to the way character width is measured, which isn't stable for variable-width fonts, leading to a lot of unnecessary geometry resets.
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
codemirror/dev#1700
No description provided.