Jetpack: Comments: iframe is initially too large
Summary of the issue: The Jetpack Comments widget sets too much height on the iframe when it's first loaded. Without guest commenting enabled, it only needs to allow 58px height, but allows 315px, resulting in lots of unnecessary whitespace.
Screenshots:
The initial load of the comment form, with the iframe's <html> element highlighted:
The widget's code, where the iframe height is being set. See: https://github.com/Automattic/jetpack/blob/master/modules/comments/comments.php#L262
WillJW
All 27 comments
I can't seem to reproduce on my end. Could you post your site URL here, so I can have a look?
If you want it to remain private, you can also contact us via this contact form:
http://jetpack.me/contact-support/
jeherve
on 13 Oct 2015
No problem @jeherve, there's a live example here: http://readliverpoolfc.com/2015/10/14/klopps-right-hand-man-arrives-liverpool/
WillJW
on 14 Oct 2015
Thanks. I can see the problem on your site, but can't reproduce on my own sites.
Do you have a copy of that site on a local test environment, where you could try switching to another theme and let me know if the problem persists?
jeherve
on 14 Oct 2015
@jeherve I've just enabled Jetpack Comments on my staging site, and it's fine. The only major difference between the two is that the production site has ads. So I've enabled ad-blocker on the production site, and it's fine! Looks like one of the ad scripts is interrupting it. Do you have any clues about this, or shall I delve deeper myself?
WillJW
on 14 Oct 2015
It might be worth removing each ad, one at a time, until you narrow things down to the one ad that seems to cause the problem.
jeherve
on 14 Oct 2015
Absolutely, I'll try that. Thanks for your help.
WillJW
on 14 Oct 2015
A user reported this in #2531482-t, and I'm able to reproduce it on my test site using Twenty Fifteen/Sixteen.
We set the initial height of the jetpack_remote_comment <iframe> here -
And then update it here, based on JSON data we receive from WordPress.com -
On Firefox 44.0/Mac, the <iframe> loads at 315px when logged in, but the JS does not update it -
When not logged in, it loads at 430px, and the JS correctly updates the the height to 55px -
On Chrome 48.0.2564.103/Mac, the issue persists whether you're logged in or not. Logged out loads at 430px, and logged in at 315px, but the JS does not set it to 55px in either case.
I cannot replicate this on Safari 9.0.3/Mac at all. The JS correctly resizes the <iframe> whether logged in or not.
Will continue testing and update the ticket with anything else I find.
mahangu
on 9 Feb 2016
Also reported here:
https://wordpress.org/support/topic/comments-box-has-set-height-and-no-scroll?replies=1&view=all
jeherve
on 17 Feb 2016
Also reported here:
https://wordpress.org/support/topic/huge-white-space-underneath-comment-section-in-chrome?replies=2&view=all
jeherve
on 25 Feb 2016
Also experiencing this.
At Line 389:
if ( <?php echo json_encode( esc_url_raw( $url_origin ) ); ?> !== event.origin ) {
return;
}
And Line 316 has:
$url_origin = set_url_scheme( 'http://jetpack.wordpress.com' );
In my case $url_origin is correctly set to "http://jetpack.wordpress.com". (I'm not on SSL.)
However event.origin gets set to "https://jetpack.wordpress.com/". Consequently the URLs don't match and the JS that adjusts the height is not run.
Why would Jetpack be requesting its AJAX content over SSL when a site its installed on isn't running under SSL?
cherrybombsoftware
on 8 Mar 2016
@cherrybombsoftware That'll be updated in 3.9.3. jetpack.wordpress.com always redirects to https://jetpack.wordpress.com now, so we're going to forego seeing the scheme and always use https.
kraftbj
on 8 Mar 2016
I'm also experiencing this problem, it seems related to caching somehow... the first time I've accessed it on both on Firefox and Vivaldi (Chromium based) that ugly spacing appeared, and when I open it on a private window it stills happens on both browsers, but it goes away after the first access for the whole private session. On Firefox there's another way to always reproduce the problem: middle-click the link to open in a new tab and let that tab fully load, only switch to it after it's loaded: that problem always happens.
My website uses my own child theme based on the popular Zerif theme.
I've tried to apply some tricks with css styling but couldn't solve that issue, only with a javascript but it was breaking the other functionality (expand, etc.) so I'm living with that problem :disappointed:.
Here's a link: http://alangamedev.com/packing-and-unpacking-bits-faster-than-bitconverter/
Alan-FGR
on 1 Jul 2016
Also reported here:
https://wordpress.org/support/topic/jetpack-comments-huge-white-space/#post-9522203
jeherve
on 25 Sep 2017
Even though this issue had a merged fix ( #7831 ) it was never actually closed; good thing, too, but I have another case with Jetpack 5.5:
http://www.psmtickling.com/blog/psm-stands-with-orlando/
Reported here: https://wordpress.org/support/topic/comment-area-size-height/page/2/#post-9676230
So I think this issue still needs a fix.
richardmtl
on 13 Nov 2017
I have another case with Jetpack 5.5:
Does this happen with one of the default themes as well?
jeherve
on 13 Nov 2017
It does; I've just tried to switch my site to one of the default themes.
The issue seems pretty common on Firefox.
ghost
on 14 Nov 2017
The problem is here:
File : wp-content/plugins/jetpack/modules/comments/comments.php
Line number 286
change from this:
$height = $params['comment_registration'] || is_user_logged_in() ? '315' : '430'; // Iframe can be shorter if we're not allowing guest commenting
to this:
$height = $params['comment_registration'] || is_user_logged_in() ? '60' : '430'; // Iframe can be shorter if we're not allowing guest commenting
But this is not total solution, if we update jetpack, the white space height will be back.
dwisetiyadi
on 14 Nov 2017
I experience the same issue and the solution given by dwisetiyadi dose not work for me.
I even tried to hardcode the height with $height = '60'; or directly changing the iframe code to
... height: 60px; ...
The site seems to simply ignore the code change and keeps presenting me 570px (and yes I checked if FTP upload worked and cleared my cache).
Why is that?
The Number 570px is especially strange because it's nowhere in the whole comments.php file.
Here is the site: https://predicted.blog/multiprocessing-for-kids/
Thanks for your help!
predictedblog
on 22 Oct 2018
The issue us still persist. I can see large gap below the response box and we cannot edit the plugin.
umeshnevase
on 27 Nov 2018
I confirm it also
pawelpotoniec
on 11 Apr 2019
Reported in #2255408-zen, complete with a screenshot of how it looks on the user's site.
mzakariya
on 7 Aug 2019
still got this issue as described above...... on a native amp site.
kclarke10
on 6 Dec 2019
Confirming this issue on a site we're working on.
tiffanybridge
on 27 Dec 2019
Also reported here: #2649702-zen
emilylaguna
on 21 Jan 2020
Confirming this issue still exists on one of my sites.
LfournierKHS
on 4 Jun 2020
This is still an issue. I can reproduce consistently on any WordPress website using Twenty Twenty theme.
arunsathiya
on 11 Jun 2020
Also reported here: https://wordpress.org/support/topic/issue-with-amp-4/
When testing this out, I also noticed the whitespace exists when both AMP and Jetpack are active. Removing Jetpack the whitespace is reduced).
coder-karen
on 29 Dec 2020
Related issues
htdat
路
3Comments
kevinlisota
路
3Comments
Viper007Bond
路
3Comments
jeherve
路
3Comments
MichaelArestad
路
3Comments
Most helpful comment
The problem is here:
File : wp-content/plugins/jetpack/modules/comments/comments.php
Line number 286
change from this:
$height = $params['comment_registration'] || is_user_logged_in() ? '315' : '430'; // Iframe can be shorter if we're not allowing guest commentingto this:
$height = $params['comment_registration'] || is_user_logged_in() ? '60' : '430'; // Iframe can be shorter if we're not allowing guest commentingBut this is not total solution, if we update jetpack, the white space height will be back.