Positioning of Absolute Panel in Chrome

[dchen71]

I am using an absolute panel with custom positioning. In chrome, the intro highlights the wrong position while firefox highlights the right position. I am using chrome v63 and Firefox v58. Below is a reproducible example similar to what I have currently setup.

library(shiny)
library(leaflet)
library(RColorBrewer)
library(scales)
library(lattice)
library(dplyr)
library(rintrojs)

# Choices for drop-downs
vars <- c(
  "Is SuperZIP?" = "superzip",
  "Centile score" = "centile",
  "College education" = "college",
  "Median income" = "income",
  "Population" = "adultpop"
)

# Define UI for application that draws a histogram
ui <- fluidPage(
  introjsUI(), # Load the rintrojs 
  # Sidebar with a slider input for number of bins 
   navbarPage("Testing", id="test",
              div(class="outer",
                  # Load styling for absolute panel
                  tags$head(tags$style(HTML(
                    "
                    #controls {
                      /* Appearance */
                      background-color: white;
                      padding: 0 20px 20px 20px;
                      cursor: move;
                      /* Fade out while not hovering */
                      opacity: 0.65;
                      zoom: 0.9;
                      transition: opacity 500ms 1s;
                    }
                    #controls:hover {
                      /* Fade in while hovering */
                      opacity: 0.95;
                      transition-delay: 0;
                    }
                    "
                  ))),
                  
                  # If not using custom CSS, set height of leafletOutput to a number instead of percent
                  leafletOutput("map", width="1000", height="1000"),
                  
                  # Shiny versions prior to 0.11 should use class = "modal" instead.
                  absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE,
                                draggable = TRUE, top = 60, left = "auto", right = 20, bottom = "auto",
                                width = 330, height = "auto",
                                
                                h2("ZIP explorer"),
                                
                                selectInput("color", "Color", vars),
                                selectInput("size", "Size", vars, selected = "adultpop"),
                                conditionalPanel("input.color == 'superzip' || input.size == 'superzip'",
                                                 # Only prompt for threshold when coloring or sizing by superzip
                                                 numericInput("threshold", "SuperZIP threshold (top n percentile)", 5)
                                ),
                                
                                plotOutput("histCentile", height = 200),
                                actionButton("help", "Help Button", icon=icon("question"))
                  )
              )
   )
)

# Generic Server Logic
server <- function(input, output, session) {
  # Help introjs
  steps <- data.frame(
    element = c(NA, "#map", "#controls", "#histCentile"),
    intro = c("NA works fine",
              "Main element is fine",
              "Absolute Panel is not centered",
              "Element is not centered in chrome")
  )
  
  observeEvent(input$help, {
    introjs(session, options = list(steps = steps))
  })
}

# Run the application 
shinyApp(ui = ui, server = server)