tippy doesn't position where I'd expect with large html content

Bug description

I have single tippy element on a page (the red image is the button that the tippy is attached to.)

actual result:

expected result:

My config:

const button = document.createElement('button');
button.setAttribute('style', `
                position: absolute;
                left: 364px;
                top: 149px;
                border-radius: 26px;
                width: 32px;
                height: 32px;
                z-index: 1;
            `);
const config = {
    arrow: true,
    flipOnUpdate: true,
    interactive: true,
    boundary: 'viewport',
    theme: 'light-border',
    trigger: 'click',
    zIndex: 999999
};

tippyInstance = tippy(button, config);

const productDetail = document.createElement('div');
productDetail.innerHTML = `bunch of stuff in here to flesh out the tippy content`;

tippyInstance.setContent(productDetail);
document.body.appendChild(button);

Is this a bug, or am I mis-configuring this?

[atomiks]

Maybe it’s the boundary: 'viewport'?

[atomiks]

It’s a bug technically but since it’s not a core base-level option and it’s already covered by placement it’s not a priority for now… 🤪