Graphical issues with tippy.js (popper.js) resulting from positioning with transform in Chrome

Question

Inside a tippy-js v6.3.7 tooltip, I have a 1px height div with background-color: #333. The div is randomly appearing blurred on some tooltips and not others. Removing the transform property on data-tippy-root fixes it but positions the tooltip in the upper-left.

score 1 · Answer 1 · answered Feb 15 '22 at 10:35

1

Your answer saved me a ton of time, thanks Vael Victus! One more thing: you are missing a pair of {}, it should be:

popperOptions={{ modifiers: [{ name: 'computeStyles', options: { gpuAcceleration: false } }] }}

answered Feb 15 '22 at 10:35

MariaV

11
2

1

Hmm, I double-checked and the code I'm using is working without them; it actually breaks with yours! – Vael Victus Feb 16 '22 at 03:32

score 0 · Accepted Answer · answered Nov 26 '21 at 18:15

I discovered the problem resulted from the transform property used to position the tooltip itself. Tippy v6 uses popper v2, which defaults to positioning this way. You can disable it via popper's gpuAcceleration setting. Here's how I fixed it through Tippy.

opts = {
    ...opts,
    popperOptions: {
        modifiers: [{
            name: 'computeStyles',
            options: {
                gpuAcceleration: false, // true by default
            },
        }]
    }
}

tp = tippy(elem, opts);

Firefox did not have this rendering problem, and both Chrome 94 and 96 did.

Graphical issues with tippy.js (popper.js) resulting from positioning with transform in Chrome

2 Answers2