Iframe-resizer: moveToAnchor on Chrome issue

Created on 7 Sep 2017  路  4Comments  路  Source: davidjbradshaw/iframe-resizer

This issue is only detected on Chrome. I cannot reproduce it on FireFox or Opera.

Sometimes, if the content inside the Iframe is long, or it takes a while to load (800ms or more) the parent page will scroll but not to the desired anchor.

Here is an example of the failure: https://www.remarkbox.com/#21cf78ca-8391-11e7-b111-040140774501

Running on Chrome scrolls me to the top of the Iframe, running in Firefox scrolls me to the desired comment.

It seems like a race condition of sorts, if the content inside the iframe is short and fast it scrolls to the proper anchor on Chrome.

I have control over both pages so if there is a workaround I can test it.

<script src="https://my.remarkbox.com/static/js/iframe-resizer/iframeResizer.min.js"></script>
<script>
    var thread_fragment = window.location.hash;
    var thread_uri = window.location.href;
    document.write('<iframe id="remarkbox" src="https://my.remarkbox.com/embed?thread_uri=' + thread_uri + '" title="remarkbox" width="100%" style="width: 100% !important; border: none !important; overflow: hidden !important;" tabindex="0"></iframe>');
    iFrameResize({
        checkOrigin: ["https://my.remarkbox.com"],
        inPageLinks: true,
        initCallback: function(e) {
            e.iFrameResizer.moveToAnchor(thread_fragment)
        }
    }, document.getElementById("remarkbox"));
</script>
<noscript>
    <iframe id=remarkbox src="https://my.remarkbox.com/embed?nojs=true" style=height:600px;width:100%;border:none!important tabindex=0></iframe>
</noscript>
Help wanted

All 4 comments

That is very strange. Looks like Chrome is firing the page load event in the iFrame a bit too early.

I'm not sure their is an easy fix in the library, but if you can detect when the content you want to scroll to has loaded and then call parentIFrame.moveToAnchor() inside the iFrame.

Not sure why that is only documented for the parent page, but looking at the code it should also be available inside the iFrame as well.

PS if you do find out whats going on here, please do share here.

Does #517 help?

Before I posted this issue, I upgraded Remarkbox to use the latest iframe-resizer release and I also tried to hotfix #517 which seemed related but it did not fix the issue.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dfelix86 picture dfelix86  路  4Comments

amangeot picture amangeot  路  8Comments

speedpacer picture speedpacer  路  6Comments

wei2go picture wei2go  路  3Comments

frederic117 picture frederic117  路  4Comments