Animation bug by compilig with Angular 5 in production mode on Firefox

[tgotwig]

Hey there 🤗
When I compiling my Angular Application with --prod flag,
I have this animation issue on Firefox:

Without the --prod flag it works perfectly.
I'm using:

• Angular 5 by Angular CLI.
• Firefox Developer Edition 59.0b4 (64-Bit)

I haven't this Bug on Chrome.

[atomiks]

Does this happen on the previous version of FF? (57)

I noticed some weirdness with the latest version as well (although, not that particular bug).

[tgotwig]

I don't know.

Because of the Angular command "ng serve --prod":
I also noticed that the whole Website crashes,
when one of these three Animations are active:

• shift-toward
• fade
• scale

This is the error message:
TypeError: (void 0) is not a function

It crashes on Firefox and Chrome.

[tgotwig]

Hmm the display bug is gone for some reason 😵

But the shift-toward animation looks different,
there are differences between --prod and without --prod 🤔

Strange bugs 😓

[atomiks]

TypeError: (void 0) is not a function

Which line does it occur on? (Turn off minification for prod for now?)

[tgotwig]

[atomiks]

I need to see the line it occurs on in the unminified version.... (particularly how it relates to this library)

[tgotwig]

It occurs only at the minified version,
it occurs also very random,
so forget the list I have listed above.

The display bug occurs also randomly.

But the animation "shift-toward" for example,
looks constantly different by using --prod.

[tgotwig]

This shows the animation differences of "shift-toward" between production and no-production:
https://mnithmde-my.sharepoint.com/:f:/g/personal/thomas_gotwig_mni_thm_de/Eo7jSe5Z2qpCgrbYh_ieHLQBkR03psvy0YEARx0CpXD4ow?e=ACyMk3

[atomiks]

It appears to be transitioning from the top-left of the document in the prod version. But I really have no idea how to fix this since it's so specific to your build

Try adding

createPopperInstanceOnInit: true

as an option?

[tgotwig]

Yeah right,
I created an small angular project which could reproduce the bug easily,
so it isn't very specific,
you can download it under the url above too,
the tooltip animations for "ng serve" and "ng serve --prod" are looking different from ground up.

[atomiks]

Did you try that option?

[tgotwig]

Same as before,
can you reproduce it?

[atomiks]

I can't download it right now, can later tonight

Try inspecting the HTML source to see what it's doing?

[tgotwig]

Okay good,
maybe this is an Angular CLI issue,
but I'm not really sure because I don't know what --prod exactly does 😵

[atomiks]

I've downloaded your files and can reproduce it when using the --prod flag... this is really weird. Is there anything specific about the --prod flag that might cause it?

The --prod meta-flag engages the following optimization features.

Ahead-of-Time (AOT) Compilation: pre-compiles Angular component templates.
Production mode: deploys the production environment which enables production mode.
Bundling: concatenates your many application and library files into a few bundles.
Minification: removes excess whitespace, comments, and optional tokens.
Uglification: rewrites code to use short, cryptic variable and function names.
Dead code elimination: removes unreferenced modules and much unused code.

Some of these could be a problem?

---

EDIT: Okay yeah... Angular's minification process stuffs the library up, probably mistakenly removing code that it thinks isn't necessary but actually is 😓 .

I just saved the minified output file from Angular and tested in a tab, and the issue occurred, whereas unpkg's one is fine, despite being the exact same thing. I really couldn't be bothered checking what's actually different between the two, but here's a paste:

Angular (min, then prettified): https://pastebin.com/8wxtutUP
Tippy (min, then prettified): https://pastebin.com/iFFvD5QV

Solution for now, I guess, would be to use the CDN link instead of bundling it with Angular

---

EDIT 2: LOL! I found the issue.

It removes this line:

popper.offsetHeight

It triggers document reflow which is required for it not to transition from the top left. The minifier thinks it's unnecessary because it's not being saved as a reference, but actually is necessary... I think I can solve this issue so that minifiers don't get confused.

[atomiks]

This should be fixed in v2.1.0, but I can release a patch if it's still getting removed by the minifier... I couldn't find a way to test to make sure.

this.popper.offsetHeight

is now

function reflow(popper) {
  void popper.offsetHeight
}
reflow(this.popper)

[tgotwig]

Thank you good to hear 🤗🤘