Quarto RevealJS设置incremental:true后幻灯片模糊及标题偏移问题求助

问题现象 #

• 开启全局incremental: true配置后，除第一张幻灯片外，其余幻灯片出现轻微模糊（切换幻灯片1和2可明显对比）
• 同时幻灯片标题存在微小上下偏移
• 关闭incremental: false时无此异常

示例代码 #

---
title: "Test slide"
author: "John Doe"
format:
  revealjs:
    incremental: true
    theme: moon    
---

## Slide 1
- item a

## Slide 2
```{r, echo=F}
library(ggplot2)
p <- ggplot(iris, aes(Sepal.Length, Sepal.Width)) + geom_point()
p

Slide 3 #

some additional text

### 原因分析
这个问题是RevealJS处理增量动画的渲染机制导致的：
1. **模糊问题**：开启增量模式后，RevealJS会为非当前显示的幻灯片添加过渡动画样式，其中包含3D变换属性（如`transform: translateZ(0)`）触发GPU加速渲染。在高DPI屏幕、特定浏览器缩放比例下，GPU渲染的内容会出现轻微的模糊偏移。
2. **标题偏移**：增量模式下，标题元素会被纳入动画队列，RevealJS会为其添加临时位置偏移样式以实现平滑出现效果，但动画初始化完成后部分样式未完全重置，导致标题出现微小位移。

### 解决办法
1. **修复模糊**：添加自定义CSS禁用非当前幻灯片的GPU加速：
```css
<style>
.reveal .slides section:not(.present) {
  transform: none !important;
}
</style>

2. 修复标题偏移：强制重置标题元素的位置样式：

<style>
.reveal h2 {
  transform: none !important;
  margin-top: 0 !important;
}
</style>

3. 替代方案：避免全局开启增量，仅在需要的元素上添加.incremental类：

## Slide 1
.incremental
- item a
- item b

内容的提问来源于stack exchange，提问作者Stefan