Wrong initial animation not working in Angular production mode

[ReneZeidler]

Bug description

When used in Angular with the production flag enabled, there are some issues with the animation the first time a tippy instance appears, as reported here: farengeyt451/ngx-tippy-wrapper#27

This is even more visible if you set moveTransition for a tippy. The first time such a tooltip appears, it gets animated flying in from the top left of the screen.

I tracked down the cause to the same issue that was reported here: #168

It's caused by UglifyJS pure_getters option, which is enabled by Angular's build process (and can't be disabled easily).

The solution in the original issue was to use void element.offsetHeight;, which apparently prevented the removal of the line by UglifyJS. I don't know what changed in the meantime, but with the current Angular version (16.1.6) and the included build tools the line gets removed again.

In the current version of Tippy, the relevant line is this:

tippyjs/src/createTippy.ts

Line 986 in ad85f6f

void popper.offsetHeight;

It gets minified to this:

The call to offsetHeight is missing.

I fixed this issue by replacing void popper.offsetHeight; with popper.offsetHeight_ = popper.offsetHeight;. It's very ugly, but it tricks the minifier.

This technically isn't a bug in this library but rather with UglifyJS, but this is the easiest way to fix the issue that I have found that doesn't involve changing the whole build process.