Resizing process interferes with scrollIntoView()

Question

Resizing process interferes with scrollIntoView()

benmolin opened this issue a year ago · comments

Describe the bug
Using document.getElementById(..).scrollIntoView(); allows window to scroll to a Id on the page. If called by the inner iFrame, it will move the entire content window down to the requested Id.

However if the outer window is changing size using iFrameResizer during the time that the inner window is trying to scroll, the scroll gets cancelled out.

I have the following content in my iFrame:

A
B
C
D
E
[Button]

On click of button, it will add the numbers 1-10, and should scroll the window to number 5.

A
B
C
D
E
[Button]
1
2
3
4
5
6
7
8
9
10

But with the iFrame resizer resizing right as the page is scrolling, it scrolls up to A instead.

To Reproduce
Code example:

Outer window: https://www.benmolin.com/iframe/outside.html
Inner window: https://www.benmolin.com/iframe/inside.html

(code also below)

inside.html

<style>
    div {
        font-size: 64px;
    }
    button{
        padding: 20px;
        margin: 40px;
    }
    body{
        background-color: white;
    }

</style>

<script src="iframeSizer.contentWindow.min.js"></script>

<script>
    var alreadyclicked = false;
    function showNumbers(){

        if (alreadyclicked == false){
            var div = document.getElementById('numbers');
            div.innerHTML += "<div id='1'>1</div><div id='2'>2</div><div id='3'>3</div><div id='4'>4</div><div id='5'>5</div><div id='6'>6</div><div id='7'>7</div><div id='8'>8</div><div id='9'>9</div><div id='10'>10</div><div id='11'>11</div><div id='12'>12</div><div id='13'>13</div><div id='14'>14</div><div id='15'>15</div><div id='16'>16</div><div id='17'>17</div><div id='18'>18</div><div id='19'>19</div><div id='20'>20</div>";

            document.getElementById('5').scrollIntoView();
        }else{

            document.getElementById('5').scrollIntoView();
        }

        alreadyclicked = true;
    }
</script>

<body>
    
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div>N</div>

<button onclick="showNumbers()">
    SHOW NUMBERS
</button>

<div id='numbers'></div>

</body>

outside.html

<style>
    iframe {
        width: 1px;
        min-width: 100%;
        border:none;
    }
    html{
        background-color: blue;
        padding: 40px;
    }
</style>
<script src="iframeResizer.min.js"></script>

<body>
<iframe id="myIframe" src="inside.html"></iframe>
</body>

<script>
iFrameResize({ log: true }, '#myIframe')
</script>

Expected behavior
On button click, additional content is added, and view on page scrolls to number 5.

Actual behavior
On button click, additional content is added, and view on page scrolls to letter A (clicking button a second time will scroll to correct location).

Desktop:

OS: Mac
Browser: Chrome 109.0.5414.87

Ben Molin · Answer 1 · Sun Jan 29 2023 07:28:04 GMT+0800 (China Standard Time)

Update: On button click, the page does scroll correctly to "5," but only for a millisecond before scrolling to "A."

Ben Molin · Answer 2 · Mon Jan 30 2023 04:14:44 GMT+0800 (China Standard Time)

I was able to fix it by waiting for the resize to be complete. Helpful: #539 (comment)

Outside.html

iFrameResize({ log: false,

    onResized: function({iframe, height, width, type}) {
        iframe.iFrameResizer.sendMessage(
            '{"resizing": "done"}', 
        ); 
    }

}, '#myIframe')

Inside.html

window.iFrameResizer = {
    onMessage: function(message){ 
        var data = JSON.parse(message);
        if (data.resizing == "done") {
            customFunction();    
        }
    }
};