Jetpack: Carousel: closing carousel view brings you back to the top of the page

[jeherve]

Steps to reproduce:

1. Open a page with a gallery
2. Scroll down, and click on one of the images
3. The Carousel view appears
4. Close the carousel view: you're back at the top of the page.

It'd be nice if closing the Carousel view brought you back to where you were on the page before you opened Carousel.

Suggested in 1924086-t

[chrisdc]

Sorry, but If I may ask are you talking about focus going back to the top? I can see that, but actual view isn't moving back to the top of the page for me (unless I start tabbing afterwards of course).

[jeherve]

The actual view moves back to the top of the page for me, on 3 different test sites of mine.

[chrisdc]

Haven't got it yet sorry. Don't suppose it could be browser specific? (tested Chrome and Firefox in Windows 7)

[jeherve]

Behaviour seems to change depending on the theme you use, but I can't figure out what's causing the issue.

[chrisdc]

Not sure if I'll be able to get it or not, but I'd like to have a go. Is
there a publicly available theme where you are experiencing the jump to top?
On 24 Sep 2014 09:55, "Jeremy Herve" [email protected] wrote:

Behaviour seems to change depending on the theme you use, but I can't
figure out what's causing the issue.

—
Reply to this email directly or view it on GitHub
https://github.com/Automattic/jetpack/issues/1125#issuecomment-56642386.

[jeherve]

You can reproduce the problem on all posts on this site:
http://tsadri.hu/en/en-route-uton/

[chrisdc]

I don't quite get why yet, but acting on a hunch it seems to go away if you take height: 100% off the body tag in your css.

[Luegge]

I can confirm the height: 100% solution for this issue. In a custom theme of my own, the view is back to top if height: 100% is specified for the body element and it does not when it isn't.

[csonnek]

Reported in #2296217-t

[jgehrcke]

I have just spent hours debugging this issue, until I came here. I do not have a definite explanation, but let me summarize my findings. First of all, all these are related:

• https://wordpress.org/support/topic/carousel-scrolls-back-to-top-of-page?replies=2
• https://github.com/jquery/jquery/issues/2215
• http://stackoverflow.com/questions/14611591/window-scrolls-top-after-wrapper-gets-overflowhidden-via-jquery
• http://greensock.com/forums/topic/11336-html-overflow-hidden-preventing-javascript-scrolling-in-parallax-application/
• https://forum.jquery.com/topic/animate-scrolltop-blocked-by-overflow-hidden-in-chrome
• https://github.com/kswedberg/jquery-smooth-scroll/issues/53

The issue seems to be depending on the exact combination of browser (only Chrome has been affected in my tests) and the body/html height and width and overflow setting. The issue also seems to be subject to "timing", because slowly stepping through the JS code via breakpointing "fixed" the issue for me, sometimes.

In my special case, I am using the Brooklyn theme (quite established!) together with the Jetpack Carousel, and the page scrolls to the top after having closed the lightbox/overlay. Breakpointing has shown me that the following lines in jetpack/blob/master/modules/carousel/jetpack-carousel.js are not working reliably:

// make sure to stop the page from scrolling behind the carousel overlay, so we don't trigger
// infiniscroll for it when enabled (Reader, theme infiniscroll, etc).
originalOverflow = $('body').css('overflow');
$('body').css('overflow', 'hidden');
// prevent html from overflowing on some of the new themes.
originalHOverflow = $('html').css('overflow');
$('html').css('overflow', 'hidden');

Debug output via

var scroll = $(window).scrollTop();
console.log("scroll position:", scroll);

before and after the mentioned code block has shown that the quoted code lines can reset the scroll position to 0 (top).

From the comments in this code one can already infer that this method is a little "flaky" and maybe (w/o offense) not perfectly thought-through. At least the comments do not explain why this should work in all cases. The comments also suggest that the body change has been implemented at first, and then the html change has been added to fix something later.

Now, it looks like working on both, html and body has added the unreliability on Chrome, especially considering https://github.com/jquery/jquery/issues/2215 and https://github.com/kswedberg/jquery-smooth-scroll/issues/53

A quote:

But this bug occurs only if the html and the body have the overflow-x, so you can
just remove the overflow-x for the html and it's okay for you I think.

Considering a thread on StackOverflow about preventing page scrolling, one can infer that the topic is rather complex and that the safest method is to actually, temporarily, store the scroll position:

http://stackoverflow.com/a/3656618

Considering the references above and the discussion in this thread here so far, it seems clear that the body element CSS is critical. In my specific scenario, the website behaves properly if only one of $('body').css('overflow', 'hidden'); and $('html').css('overflow', 'hidden'); is used.

So, outcommenting either the one or the other fixes the problem for my scenario.

I think this piece of code should be designed more reliably. It should be compatible with as many themes as possible out-of-the-box, and I think we do not want to require the theme to _not_ have a 100 % height setting for the body.

There are two options now I think:

• only use $('html').css('overflow', 'hidden'); -- would that be enough in all cases? Can we reliably test this?
• temporarily store the scroll position as proposed in the SO thread, and restore it in the close handler.

Feedback welcome! I hope someone can come up with the perfect explanation and a conceptually safe solution.

Cheers!

[alexphelps]

I've been troubleshooting my theme for hours looking for a solution to the scroll to top on click.

I found the solution recommended here actually conflicts with our theme and makes it scroll to the top now. Is there a way around this?

// make sure to stop the page from scrolling behind the carousel overlay, so we don't trigger
// infiniscroll for it when enabled (Reader, theme infiniscroll, etc).
originalOverflow = $('body').css('overflow');
$('body').css('overflow', 'hidden');
// prevent html from overflowing on some of the new themes.
originalHOverflow = $('html').css('overflow');
$('html').css('overflow', 'hidden');

Example site that has the issue - http://cpteam.bypronto.com/examples/image-galleries/tiled-gallery/

[MisterWP]

Hello guys,

I don't know why, with the last update of JetPack, I got the same problem of going back to top when clicking the close button.

I tried to downgrade JetPack, disable all my plugins, switch to the Twenty Fifteen theme... nothing works. I still had the issue. Maybe I think a problem with the last release of JQuery !? I don't know.

So, I read you different ideas and this is what I did to solve the problem :

line 484 :

just after

            originalOverflow = $('body').css('overflow');
            $('body').css('overflow', 'hidden');
            // prevent html from overflowing on some of the new themes.
            originalHOverflow = $('html').css('overflow');
            $('html').css('overflow', 'hidden');

add this

            // Save the scroll top position and track opening
            console.log('open !');
            scrollPos = $(window).scrollTop();
            console.log("scroll position:", scrollPos);

line 538 :

just after

            return container
                .trigger('jp_carousel.beforeClose')
                .fadeOut('fast', function(){
                    container.trigger('jp_carousel.afterClose');

add this

                    // After close, set again the scroll top position 
                    $(window).scrollTop(scrollPos);
                    console.log('close final !');

It works fine for me now. I'm just not relax with the idea to change my js JetPack file.

[jeherve]

This issue seems worse in Jetpack 3.8, as an extra # is added to the URL when you close the Carousel view. It brings you back to the top of the page every time.

This could be related to #2719.

[jeherve]

Reported here:
https://wordpress.org/support/topic/since-latest-update-closing-gallery-goes-back-to-top-of-post?replies=2&view=all

[dereksmart]

@jeherve, fwiw js history.pushState is not supported in < IE10, so this (leaving the hash, and probably the scrolling to top) was still happening in those browsers. When we removed that, it re-broke it for current browsers, which is what you're seeing.

This fix will work for all browsers. and I can add in the history check to remove the hash from browsers that are able to.

@MisterWP can you check out #3033?

[zehawki]

I'm a little puzzled, apparently this issue has been fixed? But its still very much there for me. I checked #3033, and the changes made there are already present in my version of jetpack-carousel.js. Am I missing something?

[dereksmart]

@zehawki what browser are you experiencing this problem in?

[zehawki]

@dereksmart Pretty much any device, any browser. Tested on Chrome, FF and Opera on desktop, laptop (both Win 10) and mobile (Android). (E.g. http://zehawk.in/blog/travel/see-the-golden-temple-in-a-new-light/)

[dereksmart]

@zehawki hm might be a windows thing. we will do some more testing and will get back to you -- Thanks for the report!

[georgestephanis]

Hrm. Well, what I am seeing on Windows10/Edge and Windows10/Chrome is that when I close the overlay, the page scrolls not to the position it was at before the overlay opened, but rather to maybe 20px of the thumbnail visible at the bottom of the current scroll position -- so there definitely is a change.

Perhaps for images closer to the top of the page, it's scrolling all the way back up, and that could be leading to the confusion?

[zehawki]

Hi folks, any update on this? Its not a windows thing, since it exhibits the same behavior on both windows and android.

Note that the problem occurs not when the carousel is closed, but when its opened. As soon as one clicks on an image and prior to opening in carousel, the page scrolls right to the top. Later when the carousel is closed, of course the very top of the page is displayed.

[dcgavril]

hi @dereksmart
this is still happening on MacOS and Windows, on Chrome and Firefox (latest versions), and as @zehawki said the scroll to top event is triggered on opening the carousel, not on closing it.
Can you please try to fix this or advise.
Thanks!

[jeherve]

@dcgavril Could you post a link to one of your galleries here, so I can have a look?

If you want your site URL to remain private, you can also contact us via this contact form:
http://jetpack.com/contact-support/

[dcgavril]

@jeherve Thanks for your reply. Here's the link to my site and an article that uses multiple galleries with the JetPack carousel active
https://www.nuntatraditionala.ro/povesti-nunti-traditionale/ionela-si-marcel-nunta-traditionala-din-sacel-maramures/
Thanks for your help.

[jeherve]

@dcgavril Your theme or one of your plugins appears to add an overflow value to both the html and the body tags. Could you try to remove the function that does that, and let me know if that changes anything?

[zehawki]

@jeherve Please have a look at this too, I'd provided this link earlier in the thread: http://zehawk.in/blog/travel/see-the-golden-temple-in-a-new-light/

Thanks.

[jeherve]

@zehawki You seem to be in a similar situation. Could you follow the instructions I posted above?

[dcgavril]

@jeherve It took a while to reply because I was trying everything possible, and finally I gave up and integrated https://wordpress.org/plugins/mpcx-lightbox/ that is basicaly a Lightbox 2 barebones integration with wordpress galleries, and it can be twiked a bit to also work with single images. This one is working perfectly and not having the scroll issue (PS: also tested a lot of lightbox plugins, and the all seem to work, without creating the scroll issue, but they are adding too many "features"). I believe the issue is related to something else, in fact the site like is changing while you click on an image - it adds #image_name .. and this could cause the browser to scroll + it just messes up the pageviews analytics - see #3356

Anyway, thank you for your work and your reply.

[jeherve]

the site like is changing while you click on an image - it adds #image_name

That's the expected behaviour with Carousel. It allows your readers to link directly to an image when sharing your posts. It doesn't affect the scroll position, though.

it just messes up the pageviews analytics - see #3356

That's also done on purpose, as you've seen in the other issue. I'll reply there. :)

[Auskrause]

Same issue happening here, except the scroll bar is gone as well: http://www.groovypost.com/deals/black-friday-ads-deals-doorbusters-discounts/

I've followed the above instructions above while working in developer mode in Chrome. It seems something with Jetpack is injecting the overflow into the page because it is not there until after clicking on a gallery (in the list of ad scans at the bottom). Of course, removing the overflow in the HTML header and the overflow in the body makes the issue go away after the fact.

After manually removing overflow in Chrome's developer mode, then clicking on a gallery again, the problem happens once again.

I'm not really sure where to proceed to prevent these overflow from being injected.

[RafaelDeJongh]

I'm still experiencing this problem when the template has a body height of 100%! Very annoying as the support blames it on other plugins/themes rather than this problem!

[sageWebster]

Reported here: 3285515-t

[jeherve]

This also seems to happen when the Google Translate Widget is active, as reported in 785210-zen.

[danielbachhuber]

I've been experiencing this issue too. It seems to be tied directly to:

html { height:100% }

And:

originalHOverflow = $('html').css('overflow');
$('html').css('overflow', 'hidden');

If I remove either, the issue goes away.

[danielbachhuber]

Here's the hack I put together to address the issue:

$( document.body ).on( 'click.fix-jp-carousel', 'div.gallery,div.tiled-gallery, a.single-image-gallery', function() {
    $('html').css('height', 'auto');
});
$( document.body ).on( 'jp_carousel.beforeClose', '.jp-carousel-wrap', function(){
    $('html').css('height', ''); // Reset to original
});

Because I don't know the impact of html { height: auto; } for my entire theme, I thought it easiest to conditionally set only when the gallery is open.

[fabwu]

@danielbachhuber Your fix worked for me. Thanks!

Can we include this in a future release?

I can provide a PR or test any change if this is working for other people...

[jeherve]

@fabwu Feel free to submit a PR, we'll review it and see if it can be included in Jetpack 👍

[SlowTG]

@danielbachhuber Since I am a newbie, I must be doing something wrong as your proposed fix didn't work. Could you specify on what line you have put it, please?

[SlowTG]

Anyone who would be able to point me in the right direction? :-) @jeherve @fabwu ?
Would be so appreciated!

[jeherve]

@SlowTG You should be able to add this to your theme's header.php file, below the wp_head call, inside a script tag.

[SlowTG]

@jeherve Thanks for clarifying! Unfortunately, that breaks the theme. Anything else I could try?

[jeherve]

Could you clarify what you mean by "that breaks the theme"? What happens when you try to add that code?

If you'd like to provide us with more details about your site, do not hesitate to contact us via this form:
https://jetpack.com/contact-support/?rel=support

[SlowTG]

It completely breaks the view of the home page. Sliders and Parallax effects are gone, it turns into a white page with some links on it. I had used the contact support form, but haven't heard back from them yet.

[jeherve]

Alright! We'll get back to you soon!

[SlowTG]

Thanks! I love the tiled gallery with lightbox, just need to get this part fixed. :-)

[jenhooks]

Reported in 1481929-zen -- active theme is Bento.

[stale[bot]]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.