Animation doesn't work the first time triggering tippy

[Ste35]

Describe the bug
When specifying an animation (such as "shift-toward") the first time hovering/clicking on the element that triggers a tippy the animation doesn't work (it has only a fade effect, not the "shift-toward"). It works perfectly the first time it disappears (but not the first time it appears) and from the second time appearing onwards. It only happens in configuration production.

To Reproduce
Steps to reproduce the behavior:

1. Download the current repo (I used the .zip download)
2. Install all packages needed
3. Serve the project "ngx-tippy-demo" in production (I used "ng serve --project ngx-tippy-demo --configuration production")
4. See error hovering the "Build in shift-toward animation" example button in the "Basic examples" column.

Expected behavior
The animation should work even the first time the tippy appears, not only from the second time onwards.

Screenshots

Desktop (please complete the following information):

• OS: windows 10
• Browser Chrome
• Version 96.0

Smartphone (please complete the following information):
Not tested on smartphone

Environment context

• Angular version: ^12.2.10, as in package.json file
• TypeScript version: ~4.3.5, as in package.json file
• Ngx-tippy-wrapper version: ^4.0.1

[farengeyt451]

Hello @Steb95. Sorry for delay. I reproduce this bug, thanks! I'll try to figure out what is going wrong.

[farengeyt451]

Seems the problem in angular and buildOptimizer. Issue recreates with latest vanilla tippy.js and clean angular project since (v12, v13)
Info I found
Bootstrap carousel transitions are broken on production build with Angular
Production build breaks Bootstrap collapse panel close animation
Production build optimization breaks code

[Ste35]

Thank you for your investigations! I hope they'll provide a better solution than the ones suggested here...

[ReneZeidler]

The issue is this line in tippy.js which gets removed by the optimizer: https://github.com/atomiks/tippyjs/blob/ad85f6feb79cf6c5853c43bf1b2a50c4fa98e7a1/src/createTippy.ts#L986

I fixed this in a very hacky way by running this script before my production builds:

import replaceInFile from 'replace-in-file';

const result = await replaceInFile.replaceInFile({
    files: 'node_modules/tippy.js/dist/tippy*.js',
    from: 'void popper.offsetHeight',
    to: 'popper.offsetHeight_ = popper.offsetHeight',
});
console.log(result);

It's very ugly, but better than removing whole optimization steps completely (which doesn't look easy with Angular's default build setup anyways).

[ReneZeidler]

This issue can now also be observed in the demo:
https://farengeyt451.github.io/ngx-tippy-wrapper/#/singleton#smooth_transitions

Scroll to the section "Smooth transitions" and hover over one of the example buttons. The first time after page load, the tooltip flies in across the screen from the top left corner of the page. This does not happen for any subsequent tooltips.