A UI glitch?

[hifall]

I notice this behavior of HyperMD:

When a document's first line is something like this #Some Title, and the page is first loaded, that line is first rendered as Markdown, then "collapses" into plain text. That is, the line is not rendered as Markdown, instead, it appears as plain "#Some Title".

This creates a flicker on the first load, which might not be the smoothest UX possible.

Actually this is reproducible on the official demo: simply navigate to that page, and you will notice that the first "#HyperMD" line is collapsed, right after the page is loaded.

Is there a way to disable this behavior, so that everything is rendered on the first load?

Thank you!

[laobubu]

Hello. Can you provide more details, eg. the browser and its version. And if you can provide a screen recording, that would be better.

[hifall]

Animation attached below.

You can see HyperMD "collapses" to # HyperMD in the animation. This is captured directly from the official demo site.

Browser: Chrome 71.0.3578.98
OS: macOS Sierra 10.12

[laobubu]

That's weird... Have you installed any extension that changes style/appearance?
I don't have Mac yet. @nasyxx can you reproduce this?

[nasyxx]

Nope, it works well.

When the page is loaded, the cursor could be in the first line, so you see # HyperMD instead of HyperMD. Have you tried to move your cursor to another line?

Google Chrome is up to date
Version 73.0.3664.3 (Official Build) dev (64-bit)

[hifall]

@nasyxx, Moving cursor to another line causes the original line to restored to "rendered" state.

Tried Firefox Quantum 63.0.3 (64-bit), and it has the same issue.

@laobubu, I tested this on Chrome Canary as well and saw the same issue. I had not installed any extension on my Chrome Canary. So, this issue is not caused by a 3rd-party extension.

[hifall]

More clarification on this matter: when this issue happens, there is no mouse/keyboard event whatsoever that could cause this. In other words, I don't click the mouse or use the keyboard.

[laobubu]

Can't reproduce on Firefox Quantum 64.0 (64-bit) & Chrome 72.0.3626.53 beta on Windows.
Still have no idea.

[hifall]

I tried on Windows 10, and now I can confirm this also happens on: Windows 10/Chrome 71.0.3578.98 32 bit. With the official demo.

[laobubu]

[hifall]

Yup. The title collapse effect shown in the above animation is what I am talking about.

[laobubu]

The # appears because, as @nasyxx said, the caret (the blinking |) is on the first line.

You might not see the blinking caret because the editor is not focused, but it is actually there.

This can be fixed by modifying src/addon/hide-token.ts and handling focus-related events, but I'm not sure whether it will make more bug. I will try to implement this someday. Now I'm occupied with my frustrating graduation project...

[hifall]

Sounds cool.

Good luck with your graduation project then, and looking forward to the fix if possible.

Thanks!