-
-
Notifications
You must be signed in to change notification settings - Fork 981
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
iFrame loads with too much height, then readjusts with mouse click or hover #283
Comments
Can you please try the latest dev branch build. |
Did this fix it for you? |
Thanks for the feedback David. No, the issue is still occurring. We were able to hack it by calling this function when the modal is opened:
|
Would you be able to make a simple test case for me to look at. Also what browsers/platforms is this an issue in? |
You can see it happening on this page: https://www.lendio.com/bp/signup All tests were done on OS X El Capitan. Chrome and safari has the height issue we are talking about. Firefox occasionally will not even show the iframe. If you go that page and it looks normal, just refresh it a few times and you'll see it. |
Any idea how many times that function of yours gets called? Also I'd suggest changing the setTimeout from 10 to 16 as their is no point checking more than once every screen refresh. |
Just looking at your page and it has v3.0.0 on it, current is v3.5.0. Can you please download the version on the dev branch and try that. https://github.com/davidjbradshaw/iframe-resizer/blob/dev/js/iframeResizer.contentWindow.js |
It appears that my function is only being called once to resize the iframe. I have updated the script to the current version. The bug is still occurring without my timeout in place. It's strange because I use the iframe resizer for this widget in a few other locations on the site and I don't have this issue. I think that its must be a timing issue with the javascript being loaded in certain instances. Once we deploy this live with our timeout hack in place, I can create an example page for you using the same page I took a screenshot of without the hack if you'd like to look at it. That should happen today. |
I’d like to know if the unreleased version in the dev branch fixes this for |
I'm at a bit of a loss. If you can build a simple test case then I'd like to take a look. |
FWIW: On http://lendio.com/bp/signup, I use an interval like this:
It works for us (obviously in a less than optimal way). But I noticed something interesting and possibly relevant: You'll notice that at one point it sets the iframe height to And when I don't use the interval, you can see that the iframe height is being set to My Hunch: There is something in our iframe that is loading late, after iframe-resizer does it's thing, like some styles or scripts, that affect the total height of the document in some way but without triggering an event that iframe-resizer is listening or can listen to. I think the next step, for me at least, is to prove or disprove my hunch by tinkering with a simplified example. |
You hunch sounds worth investigating. Although their are very few things that can cause CSS to change with out triggering mutationObserver. Do you late load a CSS file? |
Just had an idea. I think adding readystatechange to the list of watched events should fix this. https://developer.mozilla.org/en-US/docs/Web/Events/readystatechange |
Can you please give the dev branch another go. I'm hopeful this will fix it. |
When my iframe loads it looks like this:
![iframebefore](https://cloud.githubusercontent.com/assets/814538/10799678/01d74592-7d7c-11e5-94b8-bc870030be18.png)
With this log code:
![screenshot 2015-10-28 13 56 59](https://cloud.githubusercontent.com/assets/814538/10799713/3d41d570-7d7c-11e5-8ac0-c02e1d2d4b19.png)
After you hover your mouse over the iframe or click in the area of the iframe, then it sizes it correctly:
![iframeafter](https://cloud.githubusercontent.com/assets/814538/10799732/59246cf8-7d7c-11e5-90d7-c9dc1ffc979d.png)
With this log code:
![screenshot 2015-10-28 13 57 19](https://cloud.githubusercontent.com/assets/814538/10799741/6542d646-7d7c-11e5-8e33-03abbd36fc6a.png)
How do you get it to detect the correct iframe size when the page loads?
The text was updated successfully, but these errors were encountered: