Slide to start with v-mark already rendered

[tbroyer]

How can I have v-mark already rendered when a slide is shown?

I have tried using at: '+0' (with and without animate: false in case it made a difference), I also tried using clicksStart: 1. It actually works if you refresh the page on that specific slide, but not if you navigate to it.

In the following examples, I want slides 6 and 8 to start with list items already stroke through.

With ="'+0'"`

---

# Dynamic outline

---

# Outline

* <span v-mark.highlight.yellow>first</span>
* second
* third
* fourth

---

# First

---

# Outline

* <span v-mark.strike-through>first</span>
* <span v-mark.highlight.yellow.delay800="'+0'">second</span>
* third
* fourth

---

# Second

---

# Outline

* <span v-mark.strike-through="'+0'">first</span>
* <span v-mark.strike-through>second</span>
* <span v-mark.highlight.yellow.delay800="'+0'">third</span>
* fourth

---

# Third

---

# Outline

* <span v-mark.strike-through="'+0'">first</span>
* <span v-mark.strike-through="'+0'">second</span>
* <span v-mark.strike-through>third</span>
* <span v-mark.highlight.yellow.delay800="'+0'">fourth</span>

---

# Fourth

With clicksStart`

---

# Dynamic outline

---

# Outline

* <span v-mark.highlight.yellow>first</span>
* second
* third
* fourth

---

# First

---

# Outline

* <span v-mark.strike-through>first</span>
* <span v-mark.highlight.yellow.delay800="'+0'">second</span>
* third
* fourth

---

# Second

---
clicksStart: 1
---

# Outline

* <span v-mark.strike-through>first</span>
* <span v-mark.strike-through>second</span>
* <span v-mark.highlight.yellow.delay800="'+0'">third</span>
* fourth

---

# Third

---
clicksStart: 2
---

# Outline

* <span v-mark.strike-through>first</span>
* <span v-mark.strike-through>second</span>
* <span v-mark.strike-through>third</span>
* <span v-mark.highlight.yellow.delay800="'+0'">fourth</span>

---

# Fourth

Anyone knows a way to do it? Or is it a bug that really would need fixing to allow it?

[Medamineelkhattabi]

Add preload: false to the frontmatter of the outline slides. Your '+0' and clicksStart values are fine: the mark is drawn, but at 0x0 size, because Slidev mounts the next slide in advance while it is hidden.

---
preload: false
---

# Outline

* <span v-mark="{ at: '+0', type: 'strike-through', animate: false }">first</span>
* <span v-mark="{ at: '+0', type: 'strike-through', animate: false }">second</span>
* <span v-mark.strike-through>third</span>
* <span v-mark.highlight.yellow.delay800="'+0'">fourth</span>

animate: false is optional, it just skips the drawing animation for the items that are already done. Your clicksStart variant also works once preload: false is added.

Why: SlidesShow.vue preloads the previous and next slides (and all of them after 3 s) and keeps them in the DOM behind v-show (L32-L51, L92-L99). So v-mark mounts on a display: none slide, and a mark that is already active ('+0' on click 0, or up to clicksStart) calls annotation.show() right away (v-mark.ts#L131-L165). rough-notation then measures the span with getBoundingClientRect(), which is all zeros while hidden (rough-notation.ts#L241-L265). Nothing redraws it on entry: the click state doesn't change, and its ResizeObserver doesn't fire for an inline <span>. On refresh the slide mounts visible, which is why that works.

I reproduced it on v53.1.0 with your deck: after navigating 5 to 6 the strike-through path stays M0 0 C0 0, 0 0, 0 0. With preload: false it is drawn on entry and the later clicks still work. Navigating back into a slide blanks all its marks the same way, and preload: false fixes that too. at: 0 doesn't help, values of 0 or less are bumped to 1.

It's still a bug worth an issue. I didn't find an existing one.

[Medamineelkhattabi]

I opened #2829 with a fix: marks are redrawn once a preloaded slide becomes visible, so preload: false should no longer be needed after it lands.

[tbroyer]

Thanks for the preload: false tip, works great!