Adding pause/delay `. . . ` to `iframe` in `revealjs` slides squeezes html image

[rleyvasal]

Adding a pause to an iframe in revealjs slides makes the image squeezed

Code to replicate

. . .

<iframe class="stretch" src="plot.html"> </iframe>

Screenshots

[jjallaire]

You might need to provide a manual width and height for the iframe (the stretch functionality relies on measuring the actual rendered size of content and therefore might not work in the presence of pause). @cderv is that correct?

[cderv]

There may be several issue here.

I tested first using images. I think this is still unsupported upstream in Reveal.js - related issue hakimel/reveal.js#1840

The stretch feature in Reveal.js only applies to element that are direct child of <section>. When using fragment feature from Reveal.js using the pause syntax, Pandoc will create a <div> of class fragment with the image within it. So the image won't have any stretch applied by Reveal.js

The trick is to apply the .fragment class directly into the image so that it is not included in a div.

## with a pause

::: {.fragment}

Content

:::

![](https://revealjs.com/images/logo/reveal-black-text.svg){.fragment}

Now with iframes, the tricks need to be the same and .fragment needs to be applied directly on the <iframe>. However, it does not seem to play well. Looking closer into this, it seems that the calculation of remaining hight by Reveal.js is not correct in this slide and an incorrect size is set to height of the <iframe>, even height: 0px; at some point, hiding completely the iframe.
Anyway, not sure what is happing with iframes, but it seems an issue in reveal.js library itself. The layout is computed several times for the slides, and I think the calculation of stretch height gets impacted by the fragment feature. 🤔