hackmd-io-issues icon indicating copy to clipboard operation
hackmd-io-issues copied to clipboard

Scrolling broken

Open fvisin opened this issue 6 years ago • 13 comments

I am not sure what causes this, but scrolling seems broken: it often jiggles up and down while I scroll, sometimes it goes back to the beginning of the document and often code and preview are not aligned. This doesn't happen unless I am in split screen with code and preview side by side.

My document is quite big and contains many images, which I suspect might have to do with this issue. Whatever it is, it makes it unusable. Often I cannot even get to the point I want to edit, because the page scrolls back to the beginning of the document or scrolls up and down randomly. The document that causes the issue is private, but I'm happy to share it with you if you want to investigate.

fvisin avatar Aug 09 '19 10:08 fvisin

Hi @fvisin, Thanks for reporting to us. So yes, I think the jiggles are caused by the big document which affecting the performance of calculating the scroll positions.

Could you share your note link to [email protected]? Thanks!

jackycute avatar Aug 09 '19 10:08 jackycute

As a workaround, you can unlink the sync scroll by clicking the button hovering on the resize handle.

螢幕快照 2019-08-09 下午6 59 33

jackycute avatar Aug 09 '19 11:08 jackycute

That's much better, thanks!!

fvisin avatar Aug 09 '19 11:08 fvisin

Interestingly, even after unlinking scrolling the code is still jiggly to the point that scrolling downwards sometimes results in the code window moving upwards instead. Could it be due to the performance of syntax highlighting? Preview is instead very steady now.

Apologies for the number of comments - I thought this information might be of use, but I will leave you some time to debug it now!

fvisin avatar Aug 09 '19 11:08 fvisin

I found it actually relates to the MathJax rendering. The default rendering was set to use HTML/CSS and that leads to bad browser layout performance. So I tried switch the renderer to SVG and disable the fast preview which results a huge improvement.

Could you right click on any math equation on the view side and setup as I mention above? 螢幕快照 2019-08-09 下午8 23 28

jackycute avatar Aug 09 '19 12:08 jackycute

It improves the performance on the rendering, but I still have issues with the code window. When I scroll the code, especially when I scroll fast, the code window still jiggles a lot (even when it's unliked from the preview).

fvisin avatar Aug 09 '19 13:08 fvisin

Hi @fvisin, Thanks for providing such details to me, it helps a lot!

Unfortunately, if you disable the sync scroll and adjusted how MathJax rendered, the only thing left that might affect the scrolling is the editor itself. I've looked to their issue tracker it seems their is a issue matching what you've encountered? https://github.com/codemirror/CodeMirror/issues/5463

We can tweak up the viewportMargin a bit, as the content was loaded on demand and you have a big document. But maybe this only helps a little bit, could you also try to browse your note under Firefox?

jackycute avatar Aug 10 '19 09:08 jackycute

Hi @jackycute, the issue you linked seems indeed related. I tried opening the website with safari and I can scroll perfectly. I am happy to help more if you need more information!

fvisin avatar Aug 10 '19 12:08 fvisin

I have been using Safari for a while now. While scrolling is much smoother and usable than Chrome, it still has troubles linking the right part of the code to the visualization and viceversa at times.

Also, writing is super-laggy, the words appear in the code window 1 sec or more after I hit the keyboard. It lags so much behind that it takes a few (5-10) seconds to show the sentence (in the code window!) after I'm done writing. I'm not sure whether this should be filed as a separate bug - feel free to do so if you feel it's best.

fvisin avatar Aug 21 '19 15:08 fvisin

Hi @fvisin Since you're writing a large document, it produces thousands of DOMs (maybe more) in a page. It won't be fast due to the browser rendering pipeline and to show the editor and preview the result at the same time. I would suggest change to edit mode for writing and then change to view mode for the result in turns.

jackycute avatar Aug 21 '19 15:08 jackycute

Hi, I've been having the same problem but on my phone. This seems to happen only with the book view.

Any solutions?

GIF

afaa97 avatar Sep 15 '19 16:09 afaa97

Hi @RedWavez, According the gif you attached, it's another story. Could you open up new issue and include your OS, phone model and browser version? The book mode uses iframe, it might be related to the browser version and I think it might resolve when you refresh the page.

jackycute avatar Sep 15 '19 16:09 jackycute

Hi @jackycute ,

I've been running into a similar issue on my macbook (big sur), google chrome, when trying to view hackmd pages written by my professor and pressing the down key. Although refreshing does fix the issue in the short term, it doesn't take very long before the problem crops up again.

(Ignore the first few secs of the video.)

https://user-images.githubusercontent.com/21286812/152629238-da545384-395b-4b64-afc4-e0dea130d4d5.mov

ym-han avatar Feb 05 '22 04:02 ym-han