Misc

Subpixel and accelerated positioning

Instead of top and left as shown throughout the docs, you can use transform: translate() instead to position the floating element for increased performance.

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

x and y can contain decimals, so unless the transform translation is placed evenly on the device's subpixel grid, then there will be blurring. You can check window.devicePixelRatio to round by DPR.

3D transforms

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

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

If you're animating the location of the floating element, using transform will offer smoother animations.

z-index stacking and clipping

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.

Further, you may find your floating element is being clipped by its parent. computePosition() attempts to keep the floating element in view as best as possible in this scenario but in some cases this cannot be avoided.

Using the 'fixed' 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.
The floating element can be appended to a root ancestor node inside <body>, e.g. <div id="floating-root"></div> (also referred to as "portalling")

In the future, Floating UI may enable you to specify elements to avoid, so multiple floating elements can avoid colliding with each other intelligently without worrying about their z-index.

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:

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

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

The constant 10 shown in the example should be double the padding given to the shift() middleware if it's in use.

Alternatively, you may experiment with the size middleware depending on the axis overflow is occurring.