Glide failing to display correctly in Firefox

[ferguskeatinge]

I have a Glide placed in a ShinyModal, that is displayed on the applications initiation.

In chrome, works perfect, in Firefox, it has issues, with all glide screens bunched up to the left hand side, non of the buttons work.

Can provide more context if needed.

Thanks.

[juba]

Do you also have the same issue with shinyglide development version ?

Do you have the same problem with the modal example app ? It is available here : https://github.com/juba/shinyglide/blob/master/inst/examples/03_modal/app.R

If yes to both, would it be possible for you to create a reproducible example ?

Thanks for taking the time to report the issue.

[Huh]

I noticed a similar issue in Chrome. I don't think this is browser specific, but am not sure about that either. I seem to be able to make the issue appear, like in the example app referenced by @juba, based on timing of execution. As long as the glide code is executed last everything works fine, but if glide is executed ahead of other components the formatting is off. I know it sounds odd.

Here is an example using the 03_modal code. To make the issue occur I added an observeEvent call on line 75 and then set the priority high to encourage execution. I also included a Sys.sleep(5) call on line 82 to make sure that the app takes time to initialize. I have not seen the glide succeed in the modal using this configuration (i.e. priority = 999), but if I change the priority to -999 the glide renders normally. My testing here is somewhat minimal and I really am just trying to recreate the issue. Hope this helps though.

Code

## shinyglide modal example app
## Live version at : https://data.nozav.org/app/shinyglide/03_modal/

library(shiny)
library(shinyglide)

ui <- fixedPage(

  titlePanel("shinyglide modal example"),
  sidebarLayout(
    sidebarPanel(
      numericInput("mean", "Mean", value = 0),
      numericInput("sd", "Standard deviation", value = 1, min = 0),
      numericInput("n", "n", value = 100, min = 1),
      p(
        tags$a(
          href = "https://github.com/juba/shinyglide/blob/master/inst/examples/03_modal/app.R",
          "Source code on GitHub"
        )
      )
    ),
    mainPanel(
      plotOutput("plot")
    )
  )

)

server <- function(input, output, session) {

  modal_controls <- glideControls(
    list(
      prevButton(),
      firstButton(
        class = "btn btn-danger",
        `data-dismiss`="modal",
        "No, thanks !"
      )
    ),
    list(
      nextButton(),
      lastButton(
        class = "btn btn-success",
        `data-dismiss`="modal",
        "Done"
      )
    )
  )

  glide_modal <- modalDialog(
    title = "Startup assistant",
    easyClose = FALSE,
    footer = NULL,
    glide(
      custom_controls = modal_controls,
      screen(
        next_label = 'Yes, please ! <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>',
        p("Let's initialize some values, would you ?")
      ),
      screen(
        p("First, please select a mean value"),
        numericInput("mean_modal", "Mean", value = 0)
      ),
      screen(
        p("Next, please select a standard deviation value"),
        numericInput("sd_modal", "Standard deviation", value = 1, min = 0)
      ),
      screen(
        p("Thanks, we're all set !")
      )
    )
  )

  observeEvent(input$n, {
    showModal(glide_modal)
  },
  priority = 999
  )

  output$plot <- renderPlot({
    Sys.sleep(5)

    hist(rnorm(req(input$n), req(input$mean), req(input$sd)),
         main = "Such wow",
         xlab = "Wonderful x values",
         ylab = "Incredible frequencies")
  })

  observe({
    updateNumericInput(session, "mean", value = input$mean_modal)
  })

  observe({
    updateNumericInput(session, "sd", value = input$sd_modal)
  })

}

shinyApp(ui, server)

[juba]

Hm, that's strange, on my system with your example I don't have any problem with the glide display (I tested with different browsers). Do you have the problem with the development version and in a browser outside of RStudio ?

Many thanks for the complete and reproducible example, that's really useful and appreciated.

[Huh]

Shoot, sorry that example didn't work out. Here is an image of what I see on my machine.

Not sure if it is worth mentioning, but the image is what happens anytime we use shinyglide the elements render in a highly vertical manner on the left side of the container and then reformat themselves. Also, when the first screen looks like the screenshot above nothing renders on the remaining screens. Just observations that I thought I would pass along.

Here is my session info for reference. You will see I am not the most up to date. I will update later and try again to see if the dev version fixes the issue.

> session_info()
- Session info -------------------------------------------------------------------------------
 setting  value
 version  R version 4.1.0 (2021-05-18)
 os       Windows 10 x64 (build 17763)
 system   x86_64, mingw32
 ui       RStudio
 language (EN)
 collate  English_United States.1252
 ctype    English_United States.1252
 tz       America/Denver
 date     2022-06-15
 rstudio  1.4.1106 Tiger Daylily (desktop)
 pandoc   NA

- Packages -----------------------------------------------------------------------------------
 package     * version date (UTC) lib source
 brio          1.1.3   2021-11-30 [1] CRAN (R 4.1.3)
 bslib         0.3.1   2021-10-06 [1] CRAN (R 4.1.2)
 cachem        1.0.6   2021-08-19 [1] CRAN (R 4.1.3)
 Cairo         1.5-15  2022-03-16 [1] CRAN (R 4.1.3)
 callr         3.7.0   2021-04-20 [1] CRAN (R 4.1.0)
 cli           3.3.0   2022-04-25 [1] CRAN (R 4.1.3)
 crayon        1.5.1   2022-03-26 [1] CRAN (R 4.1.3)
 desc          1.4.1   2022-03-06 [1] CRAN (R 4.1.3)
 devtools    * 2.4.3   2021-11-30 [1] CRAN (R 4.1.3)
 digest        0.6.29  2021-12-01 [1] CRAN (R 4.1.3)
 ellipsis      0.3.2   2021-04-29 [1] CRAN (R 4.1.0)
 fastmap       1.1.0   2021-01-25 [1] CRAN (R 4.1.0)
 fs            1.5.2   2021-12-08 [1] CRAN (R 4.1.3)
 glue          1.6.2   2022-02-24 [1] CRAN (R 4.1.3)
 htmltools     0.5.2   2021-08-25 [1] CRAN (R 4.1.3)
 httpuv        1.6.5   2022-01-05 [1] CRAN (R 4.1.3)
 jquerylib     0.1.4   2021-04-26 [1] CRAN (R 4.1.0)
 jsonlite      1.8.0   2022-02-22 [1] CRAN (R 4.1.3)
 later         1.3.0   2021-08-18 [1] CRAN (R 4.1.3)
 lifecycle     1.0.1   2021-09-24 [1] CRAN (R 4.1.2)
 magrittr      2.0.3   2022-03-30 [1] CRAN (R 4.1.3)
 memoise       2.0.1   2021-11-26 [1] CRAN (R 4.1.3)
 mime          0.12    2021-09-28 [1] CRAN (R 4.1.1)
 pkgbuild      1.3.1   2021-12-20 [1] CRAN (R 4.1.3)
 pkgload       1.2.4   2021-11-30 [1] CRAN (R 4.1.3)
 prettyunits   1.1.1   2020-01-24 [1] CRAN (R 4.1.0)
 processx      3.5.3   2022-03-25 [1] CRAN (R 4.1.3)
 promises      1.2.0.1 2021-02-11 [1] CRAN (R 4.1.0)
 ps            1.7.0   2022-04-23 [1] CRAN (R 4.1.3)
 purrr         0.3.4   2020-04-17 [1] CRAN (R 4.1.0)
 R6            2.5.1   2021-08-19 [1] CRAN (R 4.1.3)
 Rcpp          1.0.8.3 2022-03-17 [1] CRAN (R 4.1.3)
 remotes       2.4.2   2021-11-30 [1] CRAN (R 4.1.3)
 rlang         1.0.2   2022-03-04 [1] CRAN (R 4.1.3)
 rprojroot     2.0.3   2022-04-02 [1] CRAN (R 4.1.3)
 sass          0.4.1   2022-03-23 [1] CRAN (R 4.1.3)
 sessioninfo   1.2.2   2021-12-06 [1] CRAN (R 4.1.3)
 shiny       * 1.7.1   2021-10-02 [1] CRAN (R 4.1.3)
 shinyglide  * 0.1.3   2021-06-11 [1] CRAN (R 4.1.0)
 testthat    * 3.1.4   2022-04-26 [1] CRAN (R 4.1.3)
 usethis     * 2.1.5   2021-12-09 [1] CRAN (R 4.1.3)
 withr         2.5.0   2022-03-03 [1] CRAN (R 4.1.3)
 xtable        1.8-4   2019-04-21 [1] CRAN (R 4.1.0)

 [1] C:/Users/xxxxx/Documents/R/win-library/4.1
 [2] C:/Program Files/R/R-4.1.0/library

[Huh]

@juba updating to the development version fixed the issue for me, I can no longer reproduce the issue.

[juba]

Ah, that's good to know, and that explains why I couldn't reproduce it either.

Many thanks for taking the time to create a reproducible example and test it with different versions.