[split-layout] Programatically scrolling issue when secondary layout is hidden

[Skrikjo]

Description

We have split layout, secondary child of layout is hidden in the beginning. Primary layout have header and scrollable content with some elements. When we programatically scroll to some element in primary layout, header of primary layout goes under element that is before whole split layout.
In case secondary layout is visible all works fine.

Live Demo

Example

<link rel="import" href="../bower_components/polymer/polymer.html">

<link rel="import" href="../bower_components/vaadin-split-layout/src/vaadin-split-layout.html">
<link rel="import" href="../bower_components/vaadin-button/src/vaadin-button.html">
<link rel="import" href="../bower_components/vaadin-ordered-layout/src/vaadin-vertical-layout.html">

<dom-module id="spliter-view">
    <template>
        <style include="shared-styles">
            :host {
                display: block;
            }
            .header {
                height: 40px;
                background: aquamarine;
                width: 100%;
                color: #fff;
            }
            .big-div {
                background: darkred;
                margin: 10px;
                height: 200px;
                color: #fff;
                padding: 15px;
            }

            #sub-header {
                height: 50px;
                background: blueviolet;
                width: 100%;
                color: #fff;
            }
            #editorPanel {
                width: 100%;
                height: calc(100% - 50px);
                overflow: scroll;
            }

            #bottomSpliterPart {
                background: blanchedalmond;
            }

        </style>
        <vaadin-vertical-layout style="width: 100%; height: 100%;">
            <div class="header">
                <span>Header outside splitter</span>
                <vaadin-button id="showHideBtn" on-click="toggleSecondChild">
                    <span>Hide/Show</span>
                </vaadin-button>
                <vaadin-button id="scroll" on-click="scrollToElement">
                    <span>Scroll to 5</span>
                </vaadin-button>
            </div>
            <vaadin-split-layout orientation="vertical" style="width: 100%; height: calc(100vh - 40px);">
                <div style="width: 100%; height: 70%" >
                    <vaadin-vertical-layout style="width: 100%; height: 100%;">
                        <div id="sub-header">
                            <span>Sub header inside spliter</span>
                        </div>
                        <div id="editorPanel">
                            <div class="big-div div1">1</div>
                            <div class="big-div div2">2</div>
                            <div class="big-div div3">3</div>
                            <div class="big-div div4">4</div>
                            <div class="big-div div5" id="div">5</div>
                            <div class="big-div div6">6</div>
                            <div class="big-div div7">7</div>
                        </div>
                    </vaadin-vertical-layout>
                </div>
                <div style="width: 100%; height: 30%" id="bottomSpliterPart">
                    Bottom content element
                </div>
            </vaadin-split-layout>
        </vaadin-vertical-layout>
    </template>

    <script>
        class SpliterView extends Polymer.Element {
            static get is() {
                return 'spliter-view';
            }

            static get properties() {
                return {
                    // Declare your properties here.
                };
            }

            ready() {
                super.ready();
                this.$.bottomSpliterPart.style.display = "none"
            }

            toggleSecondChild() {
                if ( this.$.bottomSpliterPart.style.display === "none") {
                    this.$.bottomSpliterPart.style.display = "block";
                } else {
                    this.$.bottomSpliterPart.style.display = "none";
                }
            }

            scrollToElement() {
                this.$.div.scrollIntoView();
            }
        }
        customElements.define(SpliterView.is, SpliterView);
    </script>
</dom-module>

Vaadin 13.0.1

Browsers Affected

• [ x ] Chrome 72.0.3626.121
• [ x ] Firefox 65.0.1
• [ x ] Safari
• Probably rest a well