Browser support

Below those the CSS does not apply and the panel renders unstyled. It also uses :has(), @layer, color-mix() and svh, all of which landed earlier than light-dark(), so that one sets the floor.

The eyedropper

Uses the browser's EyeDropper API, which today means Chromium. showEyedropper defaults to true, but the button only renders where the API exists, so nothing breaks elsewhere.

If you build your own, check useEyedropper().supported first — see useEyedropper.

Image sampling

Needs createImageBitmap and OffscreenCanvas. Both are in every browser that clears the table above.

On a phone

Below 640px the popover becomes a bottom sheet: full width, rounded top, grab handle, and a scrim with the page locked behind it. Controls stay compact for a mouse and grow to a 44px hit area for touch. Pass sheetOnMobile={false} if you want an anchored popover at every width instead.

There is one line a library cannot add for you:

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, viewport-fit=cover"
/>

Without viewport-fit=cover the sheet will not clear the home indicator on a notched iPhone. Everything still works, it just sits a little low.