The text of <li class="fragment"> temporarily loses its CSS style (in revealjs)

[ChoCho66]

Description

As title, in revealjs, when <li class="fragment">(previous level) becomes <li class="fragment visible current-fragment">, the text of <li class="fragment"> temporarily loses its CSS style.

Below is a video of this situation.

revealjs.mov

A small sample of qmd is

---
title: "Test"
format: 
  revealjs:
    theme: [default, styles.scss]
incremental: true
---

## Test

- A  
  - B 
  - $\color{red}{B}$
  - B 
    - B 
  - B 

and my styles.scss file is

/*-- scss:defaults --*/

/*-- scss:rules --*/

.fragment {
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(0.01)  invert(0.8) !important;
  &.visible {
    filter: none !important;
  }
}

In revealjs(https://revealjs.com/fragments/#custom-fragments-4.5.0), this can be easily achieved by the following html without this situation.

<style>
  .fragment.blur {
    filter: invert(75%);
  }
  .fragment.blur.visible {
    filter: none;
}
</style>
<section>
  <p class="fragment custom blur">One</p>
  <p class="fragment custom blur">Two</p>
  <p class="fragment custom blur">Three</p>
</section>

Is there any good way to solve it?
I checked the related issue here (#4794) but I still can't solve the problem

---

My quarto version is 1.4.554 and my system is macOS 14.4.1 (23E224).

[mcanouil]

I am not sure there is or that the issue is at Quarto level.
You could try directly with Pandoc, the one embedded by Quarto with something like:

quarto pandoc -t revealjs -s -o index.html slides.qmd -V revealjs-url=https://unpkg.com/reveal.js/ --include-in-header=slides.css -V theme=default

If it's indeed a Pandoc "issue", there might be some ongoing discussions:

• https://github.com/jgm/pandoc/discussions
• https://github.com/jgm/pandoc/issues

[cderv]

This is a Revealjs mechanism, and how CSS works on transition. If you search the web for CSS flickering on transition, you'll see this is a common problem.

The current revealjs doc example may not work in our current state because Quarto still uses 4.1.2 which set opacity: 0 and visibility: hidden by default on fragments
https://github.com/hakimel/reveal.js/blob/a453ac08a82069cd0a32109982b979232f7631f6/css/reveal.scss#L39-L41

Custom fragment transition is from 4.5.0 following this issue

• Allow custom fragment transitions hakimel/reveal.js#2927

and some specificity change: hakimel/reveal.js@006b348

We will update soon to Revealjs v5 to this may be solved at that time.

• Update Revealjs to latest version 5 #4795

I'll add to the issue there.

[cderv]

Quarto 1.6 now uses revealjs 5 and the custom fragments update is part of it: https://prerelease.quarto.org/docs/presentations/revealjs/advanced.html#custom-fragments

[ChoCho66]

I'm not sure if this is a good idea, but what about adding a variable in the metadata, such as custom-fragments=True, so that all <li class="fragment"> fragments generated by bullet lists become class="fragment custom"?

Currently, I'm using the following JavaScript code when compiling the document:

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll('.fragment').forEach(function (element) {
    element.classList.add('custom');
    
    // Avoid turning elements inside `agenda` https://github.com/andrie/reveal-auto-agenda into `.fragment .custom`.
    if (element.closest('.agenda')) {
      element.className = "agenda list";
    }
  });
});

[cderv]

I'll open an issue and think about all implication to add such feature built-in 🤔 Quarto is not responsible for incremental usage (it is Pandoc), so it would indeed require post processing of HTML, using JS in browser, or even adding as revealjs plugin.

Your solution is a good one for anyone needing this BTW. You could bundle it in a Quarto extension to have it inserted using your attribute idea IMO.

EDIT: #11030