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

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

If you find your floating element is being clipped by another element, some common workarounds include:

Using the "fixed" strategy to "break" the floating element out of a clipping context — use this sparingly.
The floating element can be appended to a root ancestor node inside <body>, e.g. <div id="floating-root"></div>

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.