rintrojs在Safari仅显示首个引导对话框的问题求助

此前正常使用rintrojs，但当前Shiny应用在Safari浏览器中只有第一步引导提示能自动弹出，RStudio内置浏览器、Firefox及Chrome中引导流程完全正常。

最小可复现示例（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)

具体症状 #

• RStudio浏览器：点击「Launch Tutorial」后，引导流程按步骤自动依次弹出
• Safari浏览器：仅第一步提示自动显示，第二步提示需手动点击对应的选择器才会出现

Session 信息 #

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

这个问题源于Safari对DOM元素焦点管理和introjs自动触发逻辑的兼容性差异，可尝试以下几种解决方法：

方法1：显式定义引导步骤的元素选择器 #

放弃依赖introBox的自动检测，在introjs()调用中直接指定每个步骤的目标元素和提示内容，确保Safari能精准定位元素：

observeEvent(input$intro,{
  introjs(session, 
          options = list(
            steps = list(
              list(element = "#dv", intro = "First tooltip"),
              list(element = "#iv", intro = "Second tooltip")
            )
          ),
          events = list(onbeforechange = readCallback("switchTabs")))
})

方法2：延迟触发引导流程 #

给Safari留出足够的DOM渲染时间，在调用introjs()前添加短暂延迟：

observeEvent(input$intro,{
  later::later(function(){
    introjs(session, events = list(onbeforechange = readCallback("switchTabs")))
  }, delay = 0.2)
})

方法3：调整Safari的焦点处理逻辑 #

添加自定义JS代码，修改Safari中元素聚焦的行为，避免introjs无法自动触发下一步：

ui <- page_navbar(title = "Transit Explorer", 
        introjsUI(),
        tags$script(HTML("
          document.addEventListener('DOMContentLoaded', function() {
            // 检测是否为Safari且非Chrome伪装的Safari
            if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')) {
              // 重写focus方法，加入异步延迟
              const originalFocus = HTMLElement.prototype.focus;
              HTMLElement.prototype.focus = function() {
                setTimeout(() => originalFocus.call(this), 0);
              };
            }
          });
        ")),
        bg="lightgray", 
        # 其余UI代码保持不变
)

方法4：更新rintrojs包 #

尝试更新rintrojs到最新版本，确保其依赖的intro.js库修复了Safari相关的兼容性问题：

install.packages("rintrojs")

若官方CRAN版本仍有问题，可尝试安装GitHub开发版：

# 需先安装devtools
install.packages("devtools")
devtools::install_github("carlganz/rintrojs")

内容的提问来源于stack exchange，提问作者DaveArmstrong