revealjs refresh browser between slides

[antoine4ucsd]

Description

Hello
I created a quarto slidedeck with revealjs but the aspect of the plot is not rendering well. I have to refresh my browser between slides to make sure the plot dimension is properly displayed
Plots are being generated with echarts4r.

before refreshing:

and after refreshing my browser

I tried various yaml options such as

format:
  unhcr-revealjs:
    width: 1280
    height: 720
    auto-fit: true
    slide-layout: auto-stretch
    show-slide-number: print

not sure how to fix it

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code block (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[antoine4ucsd]

will do,thank you!

[cderv]

What you are encountering is probably loading conflict with Revealjs feature, and what echarts4r is doing.

By default, revealjs will not load all the slides content at once. It will only do it for a subset of the next slides. You can tweak that by changing view-distance or other Media options

Otherwise, maybe echarts4r as an event that can be trigger to resize, reload or recompute and you can use some JS to trigger it the same way refresh is doing, when you enter a slide.

See about events from revealjs : https://revealjs.com/events/
We use this in a different places, but maybe not for an event supported by echarts4r

If you can find how echarts works to resize / recompute, then it can be adapted.

So I don't think this is quarto issue, more a revealjs + echarts problem, and maybe with tab also as I see you are using them. A lot of JS component to synchronize which is not straightfoward.

[antoine4ucsd]

you were right!!! that is great
I found similar issue here for ggplotly
#6856

I set view-distance to 10 and now it is working smoothly.

THANK YOU ++