Problems with Widget Resizing Inside {xaringan} slides

[BradyAJohnston]

When rendering a widget with {xaringan} slides, the widget resizes strangely.

In the example below, when rendered, each time the browser window is resized, the widget resizes as well. The problem arises because the container the widget canvas resizes, then the container that the canvas is is also resizes, leading to exaggerated shrinking and growing of the widget.

---
title: "Protein Example"
output: 
  xaringan::moon_reader:
    css: xaringan-themer.css
    seal: false
    nature:

      highlightStyle: github
      highlightLines: true
      ratio: 16:9
      countIncrementalSlides: true
      navigation:
        scroll: false

---

## Protein Viewer

```{r echo=FALSE, message=FALSE}
library(r3dmol)
model <- r3dmol(width = 400, height = 400) %>%
  m_add_model(r3dmol::pdb_1j72) %>%
  m_set_style(m_style_cartoon(color = "spectrum")) %>%
  m_zoom_to()
model
```

Widget after render.

Widget after shrinking the browser window.

Widget after enlarging the browser window.

I have tested it with {plotly} and the same problem doesn't happen - so it is something specific with r3dmol / 3dmol.js that is causing the problem. I just don't know enough javascript to track it down.

> sessionInfo()
R version 4.1.0 (2021-05-18)
Platform: x86_64-apple-darwin17.0 (64-bit)
Running under: macOS Big Sur 11.4

Matrix products: default
LAPACK: /Library/Frameworks/R.framework/Versions/4.1/Resources/lib/libRlapack.dylib

locale:
[1] en_AU.UTF-8/en_AU.UTF-8/en_AU.UTF-8/C/en_AU.UTF-8/en_AU.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods  
[7] base     

other attached packages:
[1] ggplot2_3.3.5 r3dmol_0.1.2 

loaded via a namespace (and not attached):
 [1] pillar_1.6.2         compiler_4.1.0      
 [3] sysfonts_0.8.5       tools_4.1.0         
 [5] digest_0.6.27        jsonlite_1.7.2      
 [7] evaluate_0.14        lifecycle_1.0.0     
 [9] tibble_3.1.3         gtable_0.3.0        
[11] viridisLite_0.4.0    pkgconfig_2.0.3     
[13] rlang_0.4.11         rstudioapi_0.13     
[15] cli_3.0.1            DBI_1.1.1           
[17] yaml_2.2.1           xfun_0.25           
[19] withr_2.4.2          showtextdb_3.0      
[21] xaringanthemer_0.4.0 knitr_1.33          
[23] dplyr_1.0.7          httr_1.4.2          
[25] generics_0.1.0       vctrs_0.3.8         
[27] htmlwidgets_1.5.3    DT_0.18             
[29] grid_4.1.0           tidyselect_1.1.1    
[31] glue_1.4.2           data.table_1.14.0   
[33] R6_2.5.1             fansi_0.5.0         
[35] plotly_4.9.4.1       xaringan_0.22       
[37] rmarkdown_2.10       purrr_0.3.4         
[39] tidyr_1.1.3          magrittr_2.0.1      
[41] scales_1.1.1         ellipsis_0.3.2      
[43] htmltools_0.5.1.1    rsconnect_0.8.24    
[45] showtext_0.9-4       assertthat_0.2.1    
[47] colorspace_2.0-2     utf8_1.2.2          
[49] lazyeval_0.2.2       munsell_0.5.0       
[51] crayon_1.4.1      

[swsoyee]

Thanks for reporting this. I will try to fix the resizing problem in September.