Collection intro animation has little shift effect on contained mashups

[bbeuckSIG]

Dear community,

I am using Thingworx Release 8.4.4 and had an issue with the Collection widget redrawing unexpectedly (original issue). The possible solutions are to either upgrade to Thingworx 9, which is currently no option (but for sure later when OpenJDK is supported) or to enable the intro animation.

So this is what I did, I enabled the "PlaysIntroAnimation" flag and can confirm my original issue is gone. But at the same time I remembered why I don't like the intro animation, it has a small shift effect on the contained mashups, i. e. the widgets of the sub-mashups are off a pixel up or down. I hope it gets clear with my screenshots.

In my example I have two overlapping circle shapes, center aligned. How it should look like:

How it looks like with intro animation:

Is this known or even fixed with a newer version already?

Thanks

Benny

[cmorfin]

Hi @bbeuckSIG 

Would you be able to upload a sample mashup and dependents entities on which you reproduce this issue ?

I have made a test in 8.4.4 but could not see the problem on my side.

Thanks

Christophe

[bbeuckSIG]

Hi @cmorfin,

thank you for following up. I attached a set of entities, I hope all dependencies are included. Please open the TestForCollectionMashup to see the effect. It contains two Collection widgets, the upper one has no animation, the bottom one does and shows this effect.

I did some more tests and just like in my original topic it seems to be critical that the bottom Collection contains a Mashup (TestForCollectionDoubleContainedMashup) which itself has a contained Mashup (TestForCollectionContainedMashup). While the upper one refers to TestForCollectionContainedMashup  directly.

When I change the Mashup for the bottom Collection also to TestForCollectionContainedMashup this effect does not occur.

On another note it seems to be important that the intro animation must be visible. While testing I hit F5 several times and could not reproduce my issue. But when using the reload from this Thingworx header bar (with options for "Show/Hide Log", "Show/Hide Debug Info", "Reload", Language and screen size) I was able to reproduce it.

Thank you
Benny

[cmorfin]

Hi @bbeuckSIG 

Thank you very much for the data and explanation, that was very helpful.

I was indeed able to reproduce the behaviour you mentioned ... though I am not sure the PlaysIntroAnimation has much impact.

In my case I could see the behaviour with it enabled or not.
Unfortunately this still occurs in 8.4.10 or in 9.0.0, so I have reported it to R&D.
This is now documented at https://www.ptc.com/en/support/article/CS327742.

For the time being if possible do not use a contained mashup in this scenario.

Thank you

Christophe

[bmihaiciuc · Accepted solution]

This seems to be related to some of the calculations that the shape widget performs during rendering which could be affected by the transforms applied by the intro animation.

Specifically for this example, the result seems to be an incorrect offset applied to the root svg element. You should be able to resolve this by clearing the incorrect positioning via css:

.widget-shape-container > svg {
    top: 0px !important;
    left: 0px !important;
}

Ideally you should assign a custom class to your shape widgets or container layout and replace the generic .widget-shape-container selector with something that includes that class.

[bbeuckSIG]

Thanks to both of you @cmorfin and @bmihaiciuc . That css trick works for me, I marked your post as my solution.

Thank you very much.