Unintentional scale transition occurring during fade

[danDanV1]

Trying to perform a fade with animated-if, but getting a unwanted bonus height & width animation too!

Cause appears related to content overflow and the appearance of the scrollbars, which changes the dimensions of the animated container as the content is toggled. For some reason even though I am only requesting a fade transition, it is animating a size change and creating the unwanted effect of moving the content on screen.

Link to: Example with slow duration to better see what is going on -- You can see the animated-container width and height being animated in the inspector. The fade transition is used here.

Twiddle example (slow duration) -- Make sure to reduce your window size so that when the menu is shown, it has to scroll.

Thought maybe it was an issue with the transition type. But the animation of animated-container occurs even if I used an empty transition type, eg:

    myTransition: function * ({ insertedSprites, removedSprites }) {

    },

The expected behaviour of applying an opacity/fade transition should be that only opacity/fade be animated.

How to prevent the width and height animation of animated-container?

[ef4]

It should be sufficient to write your CSS so that the animated-container always has a constant size.

[danDanV1]

Thanks for the hint @ef4! Poor CSS for the Header resulted in some collapsing of it's element, which resulted in animated-container changing size.