neon-animated-pages jumping when animating

Question

Whenever the pages animate, it jumps at the end. The content goes up and down really fast.

Styles:

:host {
            display: block;
            padding: 10px;
        }

        #animatedPages .iron-selected {
            position: static;
        }

        #animatedPages{
            overflow: hidden;
        }

Html:

 <paper-card class="fullwidth" heading="{{heading}}">
        <div class="card-content">
            <neon-animated-pages id="animatedPages"
                                 selected="0"
                                 entry-animation="[[entryAnimation]]"
                                 exit-animation="[[exitAnimation]]">
                <neon-animatable>
                    <paper-input label="Wat is de actieve ingrediënt in paracetamol?"></paper-input>
                </neon-animatable>
                <neon-animatable>
                    <paper-input label="Hoeveel is de max inname van hoestdrank per dag?"></paper-input>
                </neon-animatable>
            </neon-animated-pages>
        </div>
        <div class="card-actions">
            <div class="layout-horizontal">
                <paper-fab icon="arrow-back" on-tap="previousQuestion"></paper-fab>
                <paper-fab icon="[[nextButtonIcon]]" class="margin-left-auto" on-tap="nextQuestion"
                           id="nextButton"></paper-fab>
            </div>
        </div>
    </paper-card>

Relevant js:

 nextQuestion: function () {
            if (!this.checkIfFinalQuestion()) {
                this.entryAnimation = "slide-from-right-animation";
                this.exitAnimation = "slide-left-animation";
                this.$.animatedPages.selectNext();
                if (this.checkIfFinalQuestion()) {
                    return this.transformNextButtonToSendButton(true);
                }
                return this.transformNextButtonToSendButton(false);
            }
        },

        previousQuestion: function () {
            if(this.checkIfFirstQuestion()){
                return;
            }
            this.entryAnimation = "slide-from-left-animation";
            this.exitAnimation = "slide-right-animation";
            this.$.animatedPages.selectPrevious();
            if(!this.checkIfFinalQuestion()){
                return this.transformNextButtonToSendButton(false);
            }
        },

I've tried removing the padding from :host but that doesn't help. I've put position: static on .iron-selected because else neon-animatable wouldn't get enough height.

Answer 1

Apparently it's a known chrome bug, it doesn't happen in FireFox. Bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=649195#