如何避免ShinyApp被关闭后界面出现灰色遮罩层？

当Shiny应用关闭后，Plotly图表仍可交互但出现灰色遮罩，是因为Shiny默认会在应用断开连接时添加一个全屏遮罩层。你之前的CSS没有选中正确的遮罩元素，以下是可行的修复方案：

核心修改：覆盖遮罩层样式 #

将原CSS代码替换为针对Shiny断开连接遮罩的样式，直接隐藏该遮罩或设置为完全透明，同时禁止遮罩拦截鼠标事件：

.shiny-disconnected-overlay {
  display: none !important;
  /* 也可以用以下方式，保留元素但不显示也不拦截交互 */
  /* opacity: 0 !important; */
  /* pointer-events: none !important; */
}

修改后的完整函数代码 #

webGLApp <- function(p, n=2, height = "500px"){
  p <- plotly::toWebGL(p)
  ui <- shiny::fluidPage(
    shiny::tags$head(shiny::tags$style(type="text/css",
                         ".shiny-disconnected-overlay {
                            display: none !important;
                          }"
    )),
    plotly::plotlyOutput("po1", height = height),
    plotly::plotlyOutput("po2", height = height),
    plotly::plotlyOutput("po3", height = height),
    plotly::plotlyOutput("po4", height = height),
  )
  
  server <- function(input, output, session) {
    output$po1 <- plotly::renderPlotly(p) %>% shiny::bindCache("nothing")
    if (n>1) output$po2 <- plotly::renderPlotly(p) %>% shiny::bindCache("nothing")
    if (n>2) output$po3 <- plotly::renderPlotly(p) %>% shiny::bindCache("nothing")
    if (n>3) output$po4 <- plotly::renderPlotly(p) %>% shiny::bindCache("nothing")
  }
  
  shiny::runApp(shiny::shinyApp(ui, server, options = list(launch.browser = TRUE)))
}

原理说明 #

Shiny在应用断开连接时，会自动向页面注入一个带有shiny-disconnected-overlay类的全屏div元素，这个元素就是导致灰色遮罩的原因。原代码中的body.disconnected选择器无法匹配到这个遮罩层，因此样式不生效。通过直接针对这个遮罩类设置display: none，可以彻底移除遮罩，让Plotly图表的交互不受影响。

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