Clarity: Stack-view animation bug

[taivu]

Describe the bug

stack-view opens without animation.

How to reproduce

Steps to reproduce the behavior:

1. Go to https://clarity.design/documentation/stack-view
2. scroll down to angular component
3. click to open.
4. See error

this has the error --> https://clarity.design/documentation/stack-view
this doesnt -->https://v1.clarity.design/stack-view

however, it is happening to me in v1.1.13

Expected behavior

animates smoothly, open and close. like this: --> https://v1.clarity.design/stack-view

the weird thing is that this error is happening to me in v1.1.13.

Versions

App

• Angular: 7.2.15
• Clarity: 1.1.3

Device:

• Type: imac
• OS: OSX Mojave
• Browser: chrome/firefox
• Version: latest versions as of 05-09-2019

Additional notes

the inline animations are garbled: style="height:0px;display:none;0:height;1:display;display:none;height:0px;"

not sure if this is an angular issue since its animations, or clarity. its weird that the v1 docs dont exhibit this error, but i am running v1.1.3 with it. weirder that v2 docs does exhibit this error.

[Jinnie]

Hi, I am not able to reproduce it neither on the website, nor in stackblitz with 1.1.3 (1.1.13 is not a valid Clarity version).
Please verify if it still fails for you and provide more information, a screenshot and a stack trace at least.
Thanks.

[taivu]

heres a gif screen capture of the issue on clarity docs: http://www.giphy.com/gifs/MFlosM2n54syXaHgEX

[Jinnie]

I confirm it's reproducible on the website. I also reproduced it in stackblitz with 1.1.3
I am unable to reproduce it in my dev environment. I didn't find any recent changes in the component that may lead to this, so it may be Angular version specific.
Assigning to the backlog for now, so it can get picked for more extensive research when possible.
edit: Also it's quite possible to have differences between JIT and AOT modes.

[diogojesus95]

Having the same error. We just updated from version 0.11 to the most recent stable one (v 1.3.1) and we're also having this issue.

The worse isn't the lack of animation but the fact that it doesn't work at all on iPhone.
This is a GIF from iPhone XS

---

EDIT

Here is my version:

> Package                           Version
> -----------------------------------------------------------
> @angular-devkit/architect         0.800.2
> @angular-devkit/build-angular     0.800.2
> @angular-devkit/build-optimizer   0.800.2
> @angular-devkit/build-webpack     0.800.2
> @angular-devkit/core              8.0.2
> @angular-devkit/schematics        8.0.2
> @angular/cdk                      8.0.1
> @angular/cli                      8.0.2
> @angular/flex-layout              2.0.0-rc.1
> @angular/http                     7.2.15
> @ngtools/webpack                  8.0.2
> @schematics/angular               8.0.2
> @schematics/update                0.800.2
> rxjs                              6.5.2
> typescript                        3.4.5
> webpack                           4.30.0

[diogojesus95]

Update: After rolling back to version 1.0.0 problem persisted, so I guess it's an angular problem as we were using angular 5 before the update and now we went to angular 8

[Jinnie]

Note to myself: test in Safari.

[ekrismer]

Hi @Jinnie

I've noticed some strange behaviour with Angular and the stack-view as well.
Please have a look here https://stackoverflow.com/questions/56563439/clarity-stack-view-does-not-work-with-angular-ngtemplateoutlet

Let me know if should open a new issue for this problem on Github.

[Jinnie]

Thanks for the update, @epicStudio - answered on stackoverflow.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.