Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
iframe height sometimes sets to zero on initial page load
See original GitHub issueVersion: 3.5.15
Sometimes when the parent page is loaded, the height of the iframe is set to 0. Clicking on the page or switching tabs will re-trigger the calculation and set the height correctly.
I cannot reproduce this issue consistently. I simply mash the refresh button and it will eventually trigger.
iFrameResize configuration:
inPageLinks: false,
heightCalculationMethod: 'max',
minHeight: 0,
checkOrigin: true
Log from a load with the iframe sized correctly:
a.js:8 [iFrameSizer][Host page: iFrameResizer0] Added missing iframe ID: iFrameResizer0 (https://sub.example.net/frame)
a.js:8 [iFrameSizer][Host page: iFrameResizer0] IFrame scrolling disabled for iFrameResizer0
a.js:8 [iFrameSizer][Host page: iFrameResizer0] [init] Sending msg to iframe[iFrameResizer0] (iFrameResizer0:8:false:true:32:true:true:null:max:null:null:0:false:parent:scroll) targetOrigin: https://sub.example.net
a.js:8 [iFrameSizer][Host page: null] Ignored: permission_denied
a.js:8 [iFrameSizer][Host page: iFrameResizer0] [iFrame requested init] Sending msg to iframe[iFrameResizer0] (iFrameResizer0:8:false:true:32:true:true:null:max:null:null:0:false:parent:scroll) targetOrigin: https://sub.example.net
b.js:9 [iFrameSizer][iFrameResizer0] Initialising iFrame (https://sub.example.net/frame)
b.js:9 [iFrameSizer][iFrameResizer0] Reading data from page: {"targetOrigin":"https://sub.example.net"}
b.js:9 [iFrameSizer][iFrameResizer0] TargetOrigin for parent set to: https://sub.example.net
b.js:9 [iFrameSizer][iFrameResizer0] height calculation method set to "max"
b.js:9 [iFrameSizer][iFrameResizer0] HTML & body height set to "auto"
b.js:9 [iFrameSizer][iFrameResizer0] Enable public methods
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Animation Start
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Animation Iteration
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Animation End
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Input
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Mouse Up
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Mouse Down
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Orientation Change
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Print
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Ready State Change
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Touch Start
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Touch End
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Touch Cancel
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Transition Start
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Transition Iteration
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Transition End
b.js:9 [iFrameSizer][iFrameResizer0] Create body MutationObserver
b.js:9 [iFrameSizer][iFrameResizer0] In page linking not enabled
b.js:9 [iFrameSizer][iFrameResizer0] Trigger event lock on
b.js:9 [iFrameSizer][iFrameResizer0] Sending message to host page (iFrameResizer0:560:844:init)
a.js:8 [iFrameSizer][Host page: iFrameResizer0] [iFrame.onload] Sending msg to iframe[iFrameResizer0] (iFrameResizer0:8:false:true:32:true:true:null:max:null:null:0:false:parent:scroll) targetOrigin: https://sub.example.net
a.js:8 [iFrameSizer][Host page: iFrameResizer0] Received: [iFrameSizer]iFrameResizer0:560:844:init
a.js:8 [iFrameSizer][Host page: iFrameResizer0] Checking connection is from: https://sub.example.net
a.js:8 [iFrameSizer][Host page: iFrameResizer0] Checking height is in range 0-Infinity
a.js:8 [iFrameSizer][Host page: iFrameResizer0] Checking width is in range 0-Infinity
a.js:8 [iFrameSizer][Host page: iFrameResizer0] IFrame (iFrameResizer0) height set to 560px
b.js:9 [iFrameSizer][iFrameResizer0] Trigger event lock off
b.js:9 [iFrameSizer][iFrameResizer0] --
Log from a load with the iframe sized incorrectly:
a.js:8 [iFrameSizer][Host page: iFrameResizer0] Added missing iframe ID: iFrameResizer0 (https://sub.example.net/frame)
a.js:8 [iFrameSizer][Host page: iFrameResizer0] IFrame scrolling disabled for iFrameResizer0
a.js:8 [iFrameSizer][Host page: iFrameResizer0] [init] Sending msg to iframe[iFrameResizer0] (iFrameResizer0:8:false:true:32:true:true:null:max:null:null:0:false:parent:scroll) targetOrigin: https://sub.example.net
a.js:8 [iFrameSizer][Host page: null] Ignored: permission_denied
a.js:8 [iFrameSizer][Host page: iFrameResizer0] [iFrame requested init] Sending msg to iframe[iFrameResizer0] (iFrameResizer0:8:false:true:32:true:true:null:max:null:null:0:false:parent:scroll) targetOrigin: https://sub.example.net
b.js:9 [iFrameSizer][iFrameResizer0] Initialising iFrame (https://sub.example.net/frame)
b.js:9 [iFrameSizer][iFrameResizer0] Reading data from page: {"targetOrigin":"https://sub.example.net"}
b.js:9 [iFrameSizer][iFrameResizer0] TargetOrigin for parent set to: https://sub.example.net
b.js:9 [iFrameSizer][iFrameResizer0] height calculation method set to "max"
b.js:9 [iFrameSizer][iFrameResizer0] HTML & body height set to "auto"
b.js:9 [iFrameSizer][iFrameResizer0] Enable public methods
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Animation Start
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Animation Iteration
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Animation End
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Input
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Mouse Up
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Mouse Down
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Orientation Change
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Print
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Ready State Change
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Touch Start
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Touch End
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Touch Cancel
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Transition Start
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Transition Iteration
b.js:9 [iFrameSizer][iFrameResizer0] Add event listener: Transition End
b.js:9 [iFrameSizer][iFrameResizer0] Create body MutationObserver
b.js:9 [iFrameSizer][iFrameResizer0] In page linking not enabled
b.js:9 [iFrameSizer][iFrameResizer0] Trigger event lock on
b.js:9 [iFrameSizer][iFrameResizer0] Sending message to host page (iFrameResizer0:560:844:init)
a.js:8 [iFrameSizer][Host page: iFrameResizer0] Received: [iFrameSizer]iFrameResizer0:560:844:init
a.js:8 [iFrameSizer][Host page: iFrameResizer0] Checking connection is from: https://sub.example.net
a.js:8 [iFrameSizer][Host page: iFrameResizer0] Checking height is in range 0-Infinity
a.js:8 [iFrameSizer][Host page: iFrameResizer0] Checking width is in range 0-Infinity
a.js:8 [iFrameSizer][Host page: iFrameResizer0] IFrame (iFrameResizer0) height set to 560px
a.js:8 [iFrameSizer][Host page: iFrameResizer0] [iFrame.onload] Sending msg to iframe[iFrameResizer0] (iFrameResizer0:8:false:true:32:true:true:null:max:null:null:0:false:parent:scroll) targetOrigin: https://sub.example.net
a.js:8 [iFrameSizer][Host page: undefined] Size reset requested by host page
a.js:8 [iFrameSizer][Host page: undefined] Get page position: 0,212
a.js:8 [iFrameSizer][Host page: undefined] Requesting animation frame
a.js:8 [iFrameSizer][Host page: undefined] IFrame (iFrameResizer0) height set to 0px
a.js:8 [iFrameSizer][Host page: iFrameResizer0] [reset] Sending msg to iframe[iFrameResizer0] (reset) targetOrigin: https://sub.example.net
b.js:9 [iFrameSizer][iFrameResizer0] Page reset ignored by init
b.js:9 [iFrameSizer][iFrameResizer0] Trigger event lock off
b.js:9 [iFrameSizer][iFrameResizer0] --
Issue Analytics
- State:
- Created 5 years ago
- Comments:18 (9 by maintainers)
Top Results From Across the Web
Make iframe automatically adjust height according to the ...
I have made a small adjustment to the script so it now works in Safari as well. Only change made is resetting height...
Read more >iFrame Resizer - GitHub Pages
The most likely cause of this problem is having set the height of an element to be 100% of the page somewhere in...
Read more >HTML iframe height Attribute - W3Schools
Definition and Usage. The height attribute specifies the height of an <iframe> , in pixels. The default height is 150 pixels.
Read more >YouTube Embedded Players and Player Parameters
Supported values are 0 and 1 , and the default value is 0 . Note: This parameter has limited support in IFrame embeds....
Read more >Best practices for using third-party embeds - web.dev
Lazy loading the YouTube embed can save approximately 500 KB on the initial page load. Copy code <iframe src="https://www ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I came across this issue when placing the iframe in a bootstrap tab that wasn’t active. When the user clicked on the tab that contained the iframe, the iframe content would not display in full and the logs showed iframe-resizer was setting the height at only 16px. To resolve this, I called the resize method in a tab onclick event handler. That got the iframe to render its size based on its content.
This should be fixed as of v4.2.3, thanks to PR #768