The dropdown, hint, tooltips and selected-items popover are all placed with Floating UI as position: fixed panels that normally anchor to the viewport, right under the input.

There are two consumer-side fixes when you hit the warning:

  • Replace contain / container-type on the intended anchor with transform: translateZ(0) — the same containing-block effect, but browsers definitively honor it for fixed positioning.
  • Move the <web-multiselect> out of the problematic subtree.

PO01 Baseline & size controls

No special ancestor CSS — the panel anchors to the viewport, under the input.

Controls
Lock the dropdown placement after the first open so it stops flipping as you scroll.
CSS length the list grows to before it scrolls.
Quick usage 
 
 
  • lock-placement (default true) fixes the chosen side after the
						first open, so the panel does not flip above/below as you scroll or the page reflows.
    •  
  • max-height caps how tall the list grows before it scrolls — a CSS length,
						defaulting to 20rem.
 
 
Inside a transformed ancestor
 
The demo below is wrapped in a div with transform: translateZ(0).
 
PO02 Transformed wrapper
 
transform establishes a containing block — browsers honor it, so the panel still lands under the input.
 
  
transform establishes a containing block that browsers honor, so the panel still anchors correctly under the input — unlike contain / container-type.
 
 
Quick usage 
 
 
 
 
Problematic: contain: paint 
 
 
 
Fix: transform: translateZ(0)