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
).
They are small and unobtrusive.
Alternatively, consider to support us on Open Collective!
Phase
beforeWrite
Options
type Options = {
gpuAcceleration: boolean,
adaptive: boolean,
roundOffsets: 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 usetop/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.
This behavior can be disabled by setting the option to false
:
createPopper(reference, popper, {
modifiers: [
{
name: 'computeStyles',
options: {
roundOffsets: false, // true by default
},
},
],
});
Data
This modifier currently has no data.
Edit this page