Canvas, scroll and jumps

I have a plugin that uses a widget to create a canvas with some graphic (for those interested: the plugin’s body is JS that uses the fabric.js library to draw).

My problem is that I use the preview pane a lot, but when I scroll it down and type something in the editor (outside of the widget, just regular text), it jumps up (seemingly so that the canvas is at its very bottom). This is annoying.

Does someone knows how to prevent this? I assume this entails changing the widget. Maybe cache and reuse the canvas (what is the recommended approach to know I can reuse it)?

hmm. To answer something that specific, we definitely need a link to a minimal testcase, which shows the problem.

Here’s something i whipped up: https://jump.tiddlyhost.com/

To recreate:

  • Edit ‘Example’
  • Scroll the preview pane
  • type something (a letter) in the editor

result: the preview pane jumps.

if you remove the fabric widget, it doesn’t. The graph widget also adds a canvas, but it doesn’t cause this behavior.


No real issues found, but there are some styling issues.

ps: It seems a bit strange for editor to use iframe

Thank you. This wiki is a quick hack to show the problem (the jumps). The use of an iframe is not my doing. Note the preview doesn’t use an iframe.