Compute Styles

The computeStyles modifier prepares the styles that will get written to the DOM in the next phase, write. This includes rounding the offsets and deciding what properties to use (e.g. gpuAcceleration).

Phase

beforeWrite

Options

type Options = {
  gpuAcceleration: boolean,
  adaptive: boolean,
  roundOffsets: boolean | RoundOffsets, // true by default
};

type RoundOffsets = (
  offsets: $Shape<{ x: number, y: number, centerOffset: number }>
) => {|
  y: number,
  x: number,
|};

gpuAcceleration

This determines whether GPU-accelerated styles are used to position the popper.

• true: Popper will use the 3D transforms on high PPI displays and 2D transforms on low PPI displays.
• false: Popper will use top/left properties.

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'computeStyles',
      options: {
        gpuAcceleration: false, // true by default
      },
    },
  ],
});

adaptive

This option, enabled by default, tells Popper to use the most suitable CSS properties to position the popper (either top and left, or bottom and right).

This allows the popper content to change, and reduce the likelihood of needing to recompute the popper position.

For example, if our popper is positioned on the left of its reference element, Popper will apply right: 0px and translate3d(-200px, 0px, 0px). Doing so, if the content of the popper changes, making it wider or narrower, the popper will stay anchored to its reference element.

This behavior can be disabled by setting the option to false:

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'computeStyles',
      options: {
        adaptive: false, // true by default
      },
    },
  ],
});

roundOffsets

This determines whether try to round offsets to the nearest suitable subpixel based on the device pixel ratio.

Rounded offsets are useful to prevent blurriness on some browsers, but may lead to slight positioning issues (1px off).

When the option is set to false, the offsets will not be rounded, so you may receive decimal values that don't fit in the device subpixel grid.

You can optionally set this to a function to provide your own offset logic, example:

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'computeStyles',
      options: {
        roundOffsets: ({ x, y }) => ({
          x: Math.round(x + 2),
          y: Math.round(y + 2),
        }),
      },
    },
  ],
});

Data

This modifier currently has no data.