panphora
Something wrong with scrolling
Paste large content causing the textarea to overflow, the scroll is not well synced. See the movie. I don't see this happen for the Overtype editor.
https://github.com/user-attachments/assets/b4a690b8-80e1-4883-8e73-e6bc1eef1734
Thanks for reporting this! I'm unable to replicate the scrolling issue on my end - the textarea and preview stay aligned when pasting large content.
Could you share:
- Your OS and browser (including versions)
- The specific content you're pasting (or similar content that triggers it)
- Your screen resolution/zoom level if non-standard
This will help me track down what's causing the misalignment on your system.
OS: MacOS 26.0 Beta (M2 Pro) Screen: 3840x2160 (looks like: 1920x1080) Browser: All
- Chrome 139.0.7258.139 (arm64)
- Firefox 142.0 (aarch64)
- Safari 26.0
Content being pasted:
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
Test HTML:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
<script src="https://unpkg.com/synesthesia-editor/dist/synesthesia.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<style>
#my-editor {
border: 1px solid gray;
height: 100px;
}
</style>
</head>
<body>
<div id="my-editor" style="padding:0;"></div>
<script>
// Initialize Synesthesia with a Prism.js parser
const editor = Synesthesia.init('#my-editor', {
parser: (code) => {
// Use Prism.js to highlight the code
return Prism.highlight(code, Prism.languages.javascript, 'javascript');
},
fontSize: '14px',
lineHeight: 1.6
});
</script>
</body>
</html>
I'm not able to replicate this. I'm on MacOS using Chrome and Safari. I get a slight misalignment in Safari with the scroll-bounce, but the misalignment goes away after 500ms.
Can you try this CSS on the parent page and see if it helps? If it does, it's the scroll bounce thing. This CSS is not a long-term solution (as it will prevent scrolling the parent page when scrolling inside the textarea, which isn't great), but it should confirm or deny the underlying cause.
:root {
overscroll-behavior: none;
}
The overscroll-behavior does not help.
But sorry, I wrongly show you the pasted content, there should be a line ending at the last line.
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
111111111111111
If there isn't, before pasting, you can manually add one after you click the copy button at the top right corner of the code block.
Without the last line ending, everything is fine.