Misc

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

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 toptop and leftleft as shown throughout the docs, you can use transform styles instead to position the floating element for increased performance.

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)`,
});

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:

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

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 transformtransform 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 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, 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: relativeposition: relative and overflow: hiddenoverflow: hidden 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''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. 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:

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

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

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

The constant 1010 shown in the example should be double the paddingpadding given to the shift()shift() middleware if it’s in use.

Alternatively, you may experiment with the 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()getBoundingClientRect() 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.

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

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