# Browser support


|               | Minimum |
| ------------- | ------- |
| Chrome / Edge | 123     |
| Firefox       | 120     |
| Safari        | 17.5    |

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](/react/utils/use-eyedropper).

## 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:

```html
<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.