tippy.js (popper.js) 的图形问题是由 Chrome 中的变换定位引起的

Question

在 tippy-js v6.3.7 工具提示中，我有一个 1 像素的高度 div 和 background-color: #333。 div 在某些工具提示上随机出现模糊，而在其他工具提示上则没有。删除 data-tippy-root 上的 transform 属性修复它，但将工具提示定位在左上角。

Answer 1

我发现问题是由用于定位工具提示本身的 transform 属性引起的。 Tippy v6 使用的是 popper v2，默认是这样定位的。您可以通过 popper 的 gpuAcceleration 设置禁用它。这是我通过 Tippy 修复它的方法。

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

tp = tippy(elem, opts);

Firefox 没有这个渲染问题，Chrome 94 和 96 都有。

Answer 2

您的回答为我节省了大量时间，感谢 Vael Victus！还有一点：您缺少一对 {}，它应该是：

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

tippy.js (popper.js) 的图形问题是由 Chrome 中的变换定位引起的

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

webkit

popper.js

tippyjs