Page looks grayed out compared to that on Chrome and FF

Issue #15641179 • Assigned to Angelo L.

Details

Author
Huakai L.
Created
Jan 26, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
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: https://www.impute.me/ethnicity/
  2. Observe that page looks grayed out compared to that on Chrome and FF
  3. Please refer the attached screenshots

Repro URL: https://www.impute.me/guessMyHeight/

Actual Result:

Page looks grayed out compared to that on Chrome and FF

Expected Result

Page should be displayed properly

Attachments

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) {
    $(document.body).append('
    ');
    }

    // 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 = reconnectDelay.next();
      exports.showReconnectDialog(delay);
      this.$scheduleReconnect(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) {
        $(document).trigger({
          type: 'shiny:disconnected',
          socket: socket
        });
    
        self.$notifyDisconnected();
      }
    
      self.onDisconnected(); // Must be run before self.$removeSocket()
      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.

    https://msdn.microsoft.com/en-us/library/dd359014.aspx

    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?

    Steve

  • 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