Iframe-resizer: infinite resize (enlarging) loop

Created on 7 Jun 2018 · 5Comments · Source: davidjbradshaw/iframe-resizer

hi! first off, thank you for iframe-resizer. it's awesome!

i'm seeing an infinite resize loop when i use it with a Metabase embedded dashboard in an iframe.

this is with iframe-resizer 3.5.15. looking at the changelog, the changes since then seem unrelated, but feel free to let me know if you think it might already be fixed. reproduces for me in firefox 60, chrome 66, and safari 11.1.1 on mac os x 10.13.5.

here's the outer page's HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://localhost:3000/app/iframeResizer.js"></script>
</head>
<body>
foo bar baz
<iframe src="http://localhost:3000/public/dashboard/440e3f82-9c7a-4822-a244-7fb038a5eee4"
        id="metabase" frameborder="0" width="100%" allowtransparency>
</iframe>
<script>iFrameResize({log: true}, "#metabase");</script>
</body>
</html>

one possible cause is that Metabase itself uses window.parent.postMessage() to send messages to the top-level page, so i wonder if iframe-resizer is accidentally handling those. here's an example message payload from Metabase:

{
  source: "Metabase",
  name: "dashboard-parameters",
  value: "?min=3&max=5"
}

possibly related: #7, #58, https://stackoverflow.com/questions/48563508

metabase docs that recommend iframe-resizer usage: https://www.metabase.com/docs/latest/administration-guide/13-embedding.html#resizing-dashboards-to-fit-their-content

thanks in advance!

Source

snarfed

👍1

Most helpful comment

@davidjbradshaw i know it's probably a big request, but if this has happened before, you all might consider adding loop detection to at least prevent the infinite loop in these kinds of cases. just a thought.

snarfed on 19 Jun 2018

👍2

All 5 comments

@snarfed I "fixed" the issue temporarily by setting the autoResize : false and changing the limit of the iframe height, but I wish it could be differently.

douglaspetrin on 8 Jun 2018

The most common cause of the is CSS setting a style to be taller than the page, everytime the page resizes, the CSS sizes past the bottome of the page and around we go again.

Have you tried using the tolerence option as that can sometimes help. The other thing to try is the different height calculation methods, as this can sometimes help.

PostMessage is unlikly to be the issue, as we ignore messages not for iframe resizing.

davidjbradshaw on 8 Jun 2018

👍1

The most common cause of the is CSS setting a style to be taller than the page, everytime the page resizes, the CSS sizes past the bottome of the page and around we go again.

good guess! this was indeed the issue. details in metabase/metabase#7903. different height calculation methods didn't help, so i ended up overriding the offending CSS rule. tolerance would probably work too, but the difference in this case is ~150px, which is a bit big to ignore.

snarfed on 19 Jun 2018

👍1

snarfed on 19 Jun 2018

👍2

Tolerance didn't work for me (as the different height calculation methods) and we are experiencing the same problem in a similar configuration @snarfed