Add contain strict for absolutely positioned elements which specify all (#506)

coordinates and dimensions (top/left/width/height or top/left/bottom/right)

Author: krassowski

packages/widgets/src/accordionlayout.ts

@@ -241,6 +241,7 @@ namespace Private {
   ): HTMLElement {
     const title = renderer.createSectionTitle(data);
     title.style.position = 'absolute';
+    title.style.contain = 'strict';
     title.setAttribute('aria-label', `${data.label} Section`);
     title.setAttribute('aria-expanded', expanded ? 'true' : 'false');
     title.setAttribute('aria-controls', data.owner.id);

packages/widgets/src/docklayout.ts

@@ -1119,6 +1119,7 @@ export class DockLayout extends Layout {
     // Initialize the handle layout behavior.
     let style = handle.style;
     style.position = 'absolute';
+    style.contain = 'strict';
     style.top = '0';
     style.left = '0';
     style.width = '0';

packages/widgets/src/dockpanel.ts

@@ -1281,6 +1281,7 @@ export namespace DockPanel {
       this.node.classList.add('lm-DockPanel-overlay');
       this.node.classList.add('lm-mod-hidden');
       this.node.style.position = 'absolute';
+      this.node.style.contain = 'strict';
     }
 
     /**

packages/widgets/src/layout.ts

@@ -619,10 +619,12 @@ export class LayoutItem implements IDisposable {
    *
    * #### Notes
    * The widget will be set to absolute positioning.
+   * The widget will use strict CSS containment.
    */
   constructor(widget: Widget) {
     this.widget = widget;
     this.widget.node.style.position = 'absolute';
+    this.widget.node.style.contain = 'strict';
   }
 
   /**
@@ -647,6 +649,7 @@ export class LayoutItem implements IDisposable {
     style.left = '';
     style.width = '';
     style.height = '';
+    style.contain = '';
   }
 
   /**

packages/widgets/src/splitlayout.ts

@@ -829,6 +829,7 @@ namespace Private {
   ): HTMLDivElement {
     let handle = renderer.createHandle();
     handle.style.position = 'absolute';
+    handle.style.contain = 'strict';
     return handle;
   }