rintrojs only shows first dialog in Safari

I've used rintrojs successfully in the past, but in my current application, however, the tooltip only appears automatically on the first step in Safari. It works fine in the RStudio browser and also seems to work in Firefox (thanks @smartse) and Chrome, but not in Safari. Any hints on how to solve this would be much appreciated. Here's a MRE:

library(shiny)
library(bslib)
library(rintrojs)
library(plotly)
ui <- page_navbar(title = "Transit Explorer", 
        introjsUI(), 
        bg="lightgray", 
        nav_panel(title="Panel 1",
            layout_columns(col_widths = c(4,8), 
               card(
                 actionButton("intro", "Launch Tutorial"), 
                 introBox(
                    selectizeInput("dv", "Select DV", choices = c("qsec", "mpg")), 
                  data.step = 1, 
                  data.intro = "First tooltip"
               ), 
               introBox(
                   selectizeInput("iv", "Select IV", choices = c("wt", "disp")), 
                  data.step = 2, 
                  data.intro = "Second tooltip"
                ), 
               ), 
               card(plotlyOutput("p1")))),
        nav_panel(title = "Panel 2")
)
server <- function(input, output, session){
  data(mtcars)
  library(ggplot2)
  library(plotly)
  output$p1 <- renderPlotly({
    p <- ggplot(mtcars, aes(x=.data[[input$iv]], y=.data[[input$dv]])) + 
      geom_point() + 
      theme_bw()
    ggplotly(p)
  })
  observeEvent(input$intro,{
    introjs(session, events = list(onbeforechange = readCallback("switchTabs")))
  })
  
}

shinyApp(ui, server)

Here's what I see when I run this in the RStudio browser:

When I open it in the web browser, the second dialog only appears when I click in to the second selector.

Here is what my sessionInfo() looks like:

R version 4.4.2 (2024-10-31)
Platform: aarch64-apple-darwin20
Running under: macOS Sequoia 15.2

Matrix products: default
BLAS:   /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib 
LAPACK: /Library/Frameworks/R.framework/Versions/4.4-arm64/Resources/lib/libRlapack.dylib;  LAPACK version 3.12.0

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

time zone: America/Toronto
tzcode source: internal

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

other attached packages:
[1] plotly_4.10.4  ggplot2_3.5.1  rintrojs_0.3.4 bslib_0.9.0    shiny_1.10.0  

loaded via a namespace (and not attached):
 [1] gtable_0.3.6      jsonlite_1.9.0    dplyr_1.1.4       compiler_4.4.2    crayon_1.5.3      promises_1.3.2    tidyselect_1.2.1  Rcpp_1.0.14      
 [9] tidyr_1.3.1       later_1.4.1       jquerylib_0.1.4   scales_1.3.0      yaml_2.3.10       fastmap_1.2.0     mime_0.12         R6_2.6.1         
[17] labeling_0.4.3    generics_0.1.3    htmlwidgets_1.6.4 tibble_3.2.1      munsell_0.5.1     pillar_1.10.1     rlang_1.1.5       cachem_1.1.0     
[25] httpuv_1.6.15     fs_1.6.5          sass_0.4.9        lazyeval_0.2.2    viridisLite_0.4.2 memoise_2.0.1     cli_3.6.4         withr_3.0.2      
[33] magrittr_2.0.3    crosstalk_1.2.1   digest_0.6.37     grid_4.4.2        rstudioapi_0.17.1 xtable_1.8-4      lifecycle_1.0.4   vctrs_0.6.5      
[41] data.table_1.16.4 glue_1.8.0        rsconnect_1.3.4   colorspace_2.1-1  purrr_1.0.2       httr_1.4.7        tools_4.4.2       pkgconfig_2.0.3  
[49] htmltools_0.5.8.1

Solution

This seems to be a relatively recent error at least in Safari (see usablica/intro.js#2081).

As stated in a comment there, adding the CSS

.introjs-tooltipReferenceLayer {
    visibility: visible;
}

is a workaround. It works for me using Safari 18.3.

library(shiny)
library(bslib)
library(rintrojs)
library(plotly)

ui <- page_navbar(title = "Transit Explorer", 
                  introjsUI(), 
                  tags$head(
                    tags$style(
                      HTML(".introjs-tooltipReferenceLayer {
                              visibility: visible;
                            }")
                    )
                  ),
                  bg="lightgray", 
                  nav_panel(title="Panel 1",
                            layout_columns(col_widths = c(4,8), 
                                           card(
                                             actionButton("intro", "Launch Tutorial"), 
                                             introBox(
                                               selectizeInput("dv", "Select DV", choices = c("qsec", "mpg")), 
                                               data.step = 1, 
                                               data.intro = "First tooltip"
                                             ), 
                                             introBox(
                                               selectizeInput("iv", "Select IV", choices = c("wt", "disp")), 
                                               data.step = 2, 
                                               data.intro = "Second tooltip"
                                             ), 
                                           ), 
                                           card(plotlyOutput("p1")))),
                  nav_panel(title = "Panel 2")
)
server <- function(input, output, session){
  data(mtcars)
  library(ggplot2)
  library(plotly)
  output$p1 <- renderPlotly({
    p <- ggplot(mtcars, aes(x=.data[[input$iv]], y=.data[[input$dv]])) + 
      geom_point() + 
      theme_bw()
    ggplotly(p)
  })
  observeEvent(input$intro,{
    introjs(session, events = list(onbeforechange = readCallback("switchTabs")))
  })
  
}

shinyApp(ui, server)