Comments (11)
Have you tried it with the default options?
The constant resizing is caused by CSS causing the content to be always bigger than the page. The simple example is setting the body height to 101%, which creates a loop where the CCS changes the content size whenever their is a frame resize and this intern causes a page resize. If you use absolute positioning then this is an easy trap to fall into and IE is more sensitive to it.
I'm currently working on a tolerance option, so that you can set a value and the page has to resize more than that before it triggers a resize.
Currently the position thing you could do by using the sendMessage function to send back a message to the parent page asking it to reposition itself. I have being thinking about adding a parenteIFrame.scrollTo([x,y]);
functions, as the code to reposition the host page is already in the library as it calls it when it does the double resize to workout if the frame has reduced in size, in the hieghtCalculationMethods that don't by default downsize.
from iframe-resizer.
I tried it again with the default options, and I ran into the issue where the frame wouldn't downsize if the heightCalculationMethod
wasn't set to 'max'. Though, with that being said, the flickering was completely gone.
If I keep heightCalculationMethod: 'max'
and reset interval
, to default, the flickering is gone, but some pages continue to grow endlessly in IE. Which, is better than the flickering, so I could settle with this if there's no fix
As for the re-positioning, that would be cool. I'll use sendMessage until then!
from iframe-resizer.
The problem is that some sizing methods just don't downsize, so to work around that, I reset the height to the default height and then grow the iFrame again. This is a hack to get around a bug in some browsers.
To avoid the the flicker, whilst still having downsizing you need to use bodyOffset or lastElement as the sizing method. The first one is easy to break with CSS and the later one crawls in old IE.
My suggestion is to either use lastElement in modern browsers with a fall back to max in old IE. Or go with bodyOffset and debug your CSS.
from iframe-resizer.
Unfortunately, I have little control over the CSS inside the frame, I find that using 'max' in all browsers gives me an overall decent experience with the only problem being the page ever-expanding in older versions of IE, which I can live with.
Though, the fallback option sounds interesting, how would I go about setting the fallback to X?
from iframe-resizer.
Just looking at that page a little more and their is something very odd about it. I put the frame inside my test page and I just don't see the body shrink with the content in any browser.
The fallback approach is to pass a different sizing method to iframeResizer()
depending on which browser your in. That said when you fall back to bodyScroll it fails to resize at all in IE8.
Somethings borked with the CSS on that page and it's not jumping out at me what it is right now. One thing I would try is to strip all the unneeded attributes from the body tag and see if that has any effect.
I'm going to close this for now, as I don't see this as a bug in my code. I'll let you know when I ship the next version with the parentIFrame.scrollTo()
in it.
from iframe-resizer.
PS I'm sure your not the first person to run into issues trying to include code from latesttraveloffers.com.
from iframe-resizer.
After some experimenting, setting autorefresh to false works rather nicely. The pages don't seem to expand endlessly in IE, and things work relatively well. Yeah, the latesttraveloffers.net booking engine was made a long time ago, and it gives me a ton of headaches!
Cheers for the help and keeping me posted on the new version!
from iframe-resizer.
So what was the final set of options you came up with? So I can point the next person who asks about that site to this issue. ;)
from iframe-resizer.
heightCalculationMethod : 'max',
autoResize : false,
checkOrigin : false,
Using version 2.5.0
from iframe-resizer.
Thanks.
from iframe-resizer.
Dealing with the same issue here. IE9+ working fine with autoResize: true
. But in IE8 iframe height is constantly increasing. autoResize: false
solves this, but what if we actually need autoResize: true
? As far as I understand when we set autoResize: true
iframe is resizing automatically when we make changes to the iframe DOM. This seems like very common need, so I am wondering if this can be solved without needing to set autoResize: false
.
I also found that this CSS inside iframe can cause this issue:
html,
body {
height: 100%;
}
But I think this is valid CSS and in the perfect world it should not cause issues like this...
from iframe-resizer.
Related Issues (20)
- Callback from IframeResizer does not get the latest state object HOT 2
- iFrame with dynamic blog posts nested in toggles not resizing in mobile phones. HOT 10
- Svelte HOT 3
- How to handle media queries? HOT 1
- Future roadmap
- Attempting to import latest parent script via CDN results in a 400 error HOT 4
- Vue Feedback
- License changed from MIT to GPL HOT 1
- Incorrect license in 4.4.x package.json HOT 4
- Some times page show as blank on IOS device (iPhone Safari Browser) if forum is embedded and scroll up and down and then stop. HOT 2
- Vue version, TypeError: Cannot destructure property 'title' of 'document.getElementById(...)' as it is null. HOT 4
- 5.1.2 bug - index.umd.js:20 Uncaught TypeError: Invalid value used in weak set HOT 6
- autoResize(true) fails to restart resizing HOT 2
- [Question] Does this lib support prevent cross site tracking feature in safari iframe? HOT 2
- Back button not working with inPageLinks with workaround HOT 2
- window is not defined (ssr) HOT 9
- Conflicting deprecation warning vs typing of `onInit` in React library HOT 2
- Changes to the license are not mentioned in breaking changes for v5 HOT 2
- version 5 typings - use in Angular 18 HOT 1
- 'IntersectionObserver' parameter 1 in not of type 'Element' HOT 26
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from iframe-resizer.