Cimbali / Cimbali/markdown-viewer

Layout flash/jump when opening markdown files — run_at default causes visible raw text

Open Beginner friendly
#117 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
177
Forks
25
PR merge metrics
No merged PRs in 30d

Description

Hi @Cimbali, thank you for this great extension!

I have noticed a layout "jump" (flash of unstyled content) when opening markdown files. The raw markdown text is briefly visible before the extension replaces it with the rendered HTML.

## Root cause

The `content_scripts` in `manifest.json` does not specify `run_at`, so it defaults to `document_idle`. This means:

1. Firefox loads and displays the raw markdown text
2. The content script runs after the page is idle
3. The rendered article replaces the raw text → visible layout shift

## Proposed fix

Add `"run_at": "document_start"` to the content_scripts entry in `manifest.json`, so the script runs before the browser paints the raw text.

Alternatively, inject early CSS via a separate content script at `document_start` to hide `

` content until the extension renders it:

```css
/* Hide raw markdown until extension renders it */
pre { visibility: hidden !important; }
article { visibility: visible !important; }
@keyframes reveal { to { visibility: visible; } }
pre { animation: reveal 2s forwards; }
```

## Environment

- Markdown Viewer Webext 1.0.1
- Firefox 152.0
- OS: Linux Mint 22.3 (1920x1080)

This is the same issue reported for MD Reader: https://github.com/md-reader/md-reader/discussions/156

Would you consider implementing one of these options?

Thanks!

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the content_scripts entry in manifest.json and inspect when the extension's rendering script currently runs. Set the chosen early-loading behavior, then verify in Firefox that raw markdown is not visibly displayed before the rendered article appears and that the final layout remains correct.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
Under an hour
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
76/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.