---
navigationLabel: Compute Styles
order: 6
---

# 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`).

<x-ad />

## Phase

`beforeWrite`

## Options

```flow
type Options = {
  gpuAcceleration: boolean,
  adaptive: boolean,
};
```

### `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.

```js
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`:

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

## Data

This modifier currently has no data.
