import inline from '../../assets/misc.inline.jpg';

# Misc

Misc information, tips, and guidelines to help you use Floating
UI.

<CircleImage name="misc" inline={inline} />

## Browser support

The following browsers are supported (defined by `browserslist`):

- Chrome >= 73
- Firefox >= 78
- Edge >= 79
- Safari >= 12.0
- iOS >= 12.0
- Opera >= 53

## Subpixel and accelerated positioning

Instead of `top{:.objectKey}` and `left{:.objectKey}` as shown
throughout the docs, you can use transform styles instead to
position the floating element for increased performance.

```js
function roundByDPR(value) {
  const dpr = window.devicePixelRatio || 1;
  return Math.round(value * dpr) / dpr;
}

Object.assign(floatingEl.style, {
  top: '0',
  left: '0',
  transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
});
```

`x` and `y` can contain fractional numbers (decimal), so there
will be blurring unless we place it evenly on the device's pixel
grid. The rounding method above ensures the floating element is
positioned optimally for the screen.

### 3D transforms

You can also promote the floating element to its own layer:

{/* prettier-ignore */}
```js
Object.assign(floatingEl.style, {
  top: '0',
  left: '0',
  transform: `translate3d(${roundByDPR(x)}px,${roundByDPR(y)}px,0)`,
});
```

If you're animating the location of the floating element, using
`transform{:.objectKey}` will offer smoother animations.

<Notice type="warning">
  3D transforms can sometimes result in blurry text on some
  Windows devices with scaling. You may only want to use 3D
  transforms on high PPI displays, and 2D transforms on low PPI
  displays.
</Notice>

## z-index stacking

Floating UI does not have opinions about how your elements stack
on the z-axis. This means your element may be occluded beneath
another positioned element if it has a higher `z-index`.

Due to the complexity of this, it is up to you to handle the z
indices of various floating elements in your application.

In the future, Floating UI may
[enable you to specify elements to avoid](https://github.com/floating-ui/floating-ui/issues/1440),
so multiple floating elements can avoid colliding with each other
intelligently without worrying about their `z-index`.

## Clipping

Your floating element may get clipped by an ancestor if it has
`position: relative{:sass}` and `overflow: hidden{:sass}` CSS
styles, and small enough that the floating element cannot be
positioned in view properly.

Two solutions include:

- **Portalling**: The floating element can be appended to a
  container outside of the clipping ancestor.
- **Use fixed strategy**: Using the `'fixed'{:js}` strategy will
  "break" the floating element out of its parent clipping context
  in the majority of cases. This allows you to keep the floating
  element's DOM context in tact. This is not 100% guaranteed
  though — portalling is the only 100% reliable method.

## Handling large content

When your floating element's width exceeds the viewport's, it can
result in unexpected behavior.

You can limit the width of the floating element using the
following CSS:

```css
.floating {
  max-width: calc(100vw - 10px);
}
```

This will always make it 10 pixels less than the width of the
viewport.

The constant `10{:js}` shown in the example should be double the
`padding{:.objectKey}` given to the `shift(){:js}` middleware if
it's in use.

Alternatively, you may experiment with the [`size`](/docs/size)
middleware depending on the axis overflow is occurring.

## Relative units

Floating UI works entirely with pixel units as it is a JavaScript
library that works with `getBoundingClientRect(){:js}` and other
measurement properties that return pixels. Further, it is
cross-platform, and pixels are the most commonly supported unit.

If your CSS uses relative units like `rem`, it is recommended you
convert the values into pixels before passing them to Floating
UI.

```js
computePosition(reference, floating, {
  // 1rem => 16px
  middleware: [offset(remToPx(1))],
});
```