iframe resizer height calculation method 'max' causing jittery behaviour
jcalfee opened this issue · comments
Describe the bug
I have a 3rd party iframe where iframe-resizer gets close in height but cuts off the last 1/3 of the form's button. I realize this is a CSS issue but I do not control that CSS in every case. It is pretty close though. Fortunately, heightCalculationMethod: 'max' figures it out but it causes jittery behavior and higher CPU. It can't make up its mind between the desired height and 100px less than the desired height.
What about a simple tolerance for max? It is not terrible to have a little extra space after an iframe. Keep sticking with a max unless it is reduce by more than the tolerance parameter. That should stop all the event looping. If that errors it is only a matter of the user provided tolerance which probably would only be 170px or so. That is much better than having 1/3 of a button. This would not introduce any delay in a normal max update either.
Another option: a user provided debounce value in milliseconds that errors on the side of max. That would introduce a delay for a desired re-max (the form really did grow), but in the jitter case it looks like I could use around 170ms so that would not be much.
To Reproduce
Try iframe-resizer with a public published form at https://www.cognitoforms.com/ .. The forms I checked all have the issue.
Desktop (please complete the following information):
- Browser : Chromium
- Version 97
Additional context
Resizer 4.3.2
Although Cognito has a seamless embed that may allow a CSS fix, that can't be used for editing a form that was filled out already (only creating new submission) so a fix for 'max' would still be needed.
You know, coffee shops are starting to take Bitcoin and other cryptos.
Hey, lowestElement seems to work! No need to leave this open on my behalf.
Glad you found a solution, their is already a tolerance option that you can set.
Hey! I was able to find the solution with option: heightCalculationMethod : 'taggedElement', and adding the data-iframe-height to the unproblematic html tag.