iframe-resizer icon indicating copy to clipboard operation
iframe-resizer copied to clipboard

moveToAnchor on Chrome issue

Open russellballestrini opened this issue 7 years ago • 4 comments

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>

russellballestrini avatar Sep 07 '17 14:09 russellballestrini

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.

davidjbradshaw avatar Sep 26 '17 17:09 davidjbradshaw

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

davidjbradshaw avatar Sep 26 '17 17:09 davidjbradshaw

Does #517 help?

davidjbradshaw avatar Sep 27 '17 07:09 davidjbradshaw

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.

russellballestrini avatar Sep 27 '17 14:09 russellballestrini