[GUACAMOLE-918] Guacamole Display not visible under Shadow DOM

• Type: Bug
• Status: Open
• Priority: Minor
• Resolution: Unresolved
• Affects Version/s: 1.1.0
• Component/s: guacamole-common-js
• Environment: guacamole-common-js 1.1.0 on Chromium 78 ; org.apache.guacamole:guacamole-common:1.1.0 on OpenJDK 11
• Assignee: Unassigned
• Reporter: Jonas Zeiger
• Created: 07/Jan/20 11:44
• Updated: 11/Feb/20 18:04

Description

The Guacamole display doesn't show when inserted under shadow DOM.

The display is attached like this:

const wrapper = this.shadowRoot.getElementById('console-screen-wrapper');
wrapper.style.width = '' + 640 + 'px';
wrapper.style.height = '' + 480 + 'px';
this.display = wrapper.appendChild(client.getDisplay().getElement());

The display elements including canvas are present in the DOM (see DOM screenshot).

The reason seems to be the explicit canvas/layer z-index setup here:

guacamole-common.js, Guacamole.Layer()

    // Explicitly render canvas below other elements in the layer (such as
    // child layers). Chrome and others may fail to render layers properly
    // without this.
    canvas.style.zIndex = -1;

Setting canvas.style.zIndex to 0 instead of -1 makes all layers visible under shadow DOM.