[freezeframe] blurs pngs until mouseover

[tgerke]

gif behavior is 🤩!! Current side effect is any pngs in the presentation are also impacted by mouseover actions, including a blur until mouseover is activated.

This seems to be triggered by calling a separate .css which is not the Xaringan default. Reprex below, with .png and .gif beneath. Or, if easier, these things are zipped up here reprex.zip

index.Rmd

---
title: "Freezeframe reprex"
output:
  xaringan::moon_reader:
    lib_dir: libs
    css: [libs/css/other-css.css]
    nature:
      ratio: 16:9
---

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
knitr::opts_chunk$set(
  fig.width=9, fig.height=3.5, fig.retina=3,
  out.width = "100%",
  cache = FALSE,
  echo = TRUE,
  message = FALSE, 
  warning = FALSE, 
  hiline = TRUE
)

xaringanExtra:::use_freezeframe()

.h-center.w-40[ ]

From: https://www.pinclipart.com/maxpin/ibxRRmT/

---

.h-center.w-40[ ]

From: https://tenor.com/2k19.gif

.h-center {
  margin: 0 auto;
}
.w-40 {
  width: 40%;
}

[gadenbuie]

It seems like it has to do with the container size when freezeframe loads. It's less about the external CSS, more about the width: 40%

[tgerke]

🤦 totally makes sense. I realize this is now ancillary to any direct functionality of freezeframe but do you have any suggestions for how one might resize an image (whether gif or png) to play more nicely with freezeframe?

[gadenbuie]

I think just make the gif bigger. 🤷‍♂️ If you make them full screen or one per slide I think you'll get better results.

[tgerke]

Sorry to realize this late in the game, but the behavior is maintained even without additional css. Reprex below; if you mouse on and off the .png you'll see the edges blur. Could this be browser specific interaction with freezeframe.js? Never happened with xaringan for me before. I'm on Firefox 86.0

---
title: "Freezeframe reprex"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      ratio: 16:9
---

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
knitr::opts_chunk$set(
  fig.width=9, fig.height=3.5, fig.retina=3,
  out.width = "100%",
  cache = FALSE,
  echo = TRUE,
  message = FALSE, 
  warning = FALSE, 
  hiline = TRUE
)

xaringanExtra:::use_freezeframe()

From: https://www.pinclipart.com/maxpin/ibxRRmT/

---

From: https://tenor.com/2k19.gif

[gadenbuie]

okay, try again I made a small change to try to freeze only images with src ending in "gif"

[tgerke]

IT'S AMAZING! Still seems to be heavy resolution loss with whatever conversion freezeframe.js does to render the first frame of a gif (which I'm confident is not a flaw of xaringanExtra) but I'm quite happy to accept that as long as it's not interfering with non-gif behavior. Thanks!