Page looks grayed out compared to that on Chrome and FF

Issue #15641179 • Assigned to Angelo L.


Huakai L.
Jan 26, 2018
This issue is public.
Found in
  • Microsoft Edge
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Repro Steps:

  1. Invoke Edge browser and navigate to URL:
  2. Observe that page looks grayed out compared to that on Chrome and FF
  3. Please refer the attached screenshots

Repro URL:

Actual Result:

Page looks grayed out compared to that on Chrome and FF

Expected Result

Page should be displayed properly


Comments and activity

  • The element in question is added to the DOM on WebSocket client (app code) disconnect:

    this.onDisconnected = function() {
    // Add gray-out overlay, if not already present
    var $overlay = $(‘#shiny-disconnected-overlay’);
    if ($overlay.length === 0) {

    // To try a reconnect, both the app (this.$allowReconnect) and the
    // server (this.$socket.allowReconnect) must allow reconnections, or
    // session$allowReconnect("force") was called. The "force" option should
    // only be used for testing.
    if ((this.$allowReconnect === true && this.$socket.allowReconnect === true) ||
        this.$allowReconnect === "force")
      var delay =;


    Which is triggered on WebSocket connection close:

    // Called when a successfully-opened websocket is closed, or when an
    // attempt to open a connection fails.
    socket.onclose = function() {
      // These things are needed only if we've successfully opened the
      // websocket.
      if (hasOpened) {
          type: 'shiny:disconnected',
          socket: socket
      self.onDisconnected(); // Must be run before self.$removeSocket()

    The issue appears to be Chrome not firing a closed event after an error, which violates the WebSocket WHATWG spec

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

  • Hi Huakai,

    Thank you for the update.  I was just looking at this and saw the disconnected status class being added to the DOM due to the WebSocket error.  I also saw that Edge and Chrome are handling the WebSocket errors connection differently and that the WebSocket request header has ‘peerdist’ for the encoding.  I was going down that path when I saw your message.

    So we know the difference in background color is due to the overlay being added to the DOM.

    I think we can close this as working as designed?


  • Microsoft Edge Team

    Changed Status to “By design”

    Changed Assigned To to “Angelo L.”

    Changed Status from “By design”

You need to sign in to your Microsoft account to add a comment.

Sign in