-
Notifications
You must be signed in to change notification settings - Fork 797
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
Carousel: closing carousel view brings you back to the top of the page #1125
Comments
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). |
The actual view moves back to the top of the page for me, on 3 different test sites of mine. |
Haven't got it yet sorry. Don't suppose it could be browser specific? (tested Chrome and Firefox in Windows 7) |
Behaviour seems to change depending on the theme you use, but I can't figure out what's causing the issue. |
Not sure if I'll be able to get it or not, but I'd like to have a go. Is
|
You can reproduce the problem on all posts on this site: |
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. |
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. |
Reported in #2296217-t |
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:
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
Debug output via
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 Now, it looks like working on both, A quote:
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 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:
Feedback welcome! I hope someone can come up with the perfect explanation and a conceptually safe solution. Cheers! |
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/ |
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
add this
line 538 : just after
add this
It works fine for me now. I'm just not relax with the idea to change my js JetPack file. |
This issue seems worse in Jetpack 3.8, as an extra This could be related to #2719. |
@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. |
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.
That's also done on purpose, as you've seen in the other issue. I'll reply there. :) |
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. |
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! |
Reported here: 3285515-t |
This also seems to happen when the Google Translate Widget is active, as reported in 785210-zen. |
I've been experiencing this issue too. It seems to be tied directly to:
And:
If I remove either, the issue goes away. |
Here's the hack I put together to address the issue:
Because I don't know the impact of |
@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... |
@fabwu Feel free to submit a PR, we'll review it and see if it can be included in Jetpack 👍 |
@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 You should be able to add this to your theme's |
@jeherve Thanks for clarifying! Unfortunately, that breaks the theme. Anything else I could try? |
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: |
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. |
Alright! We'll get back to you soon! |
Thanks! I love the tiled gallery with lightbox, just need to get this part fixed. :-) |
Reported in 1481929-zen -- active theme is Bento. |
This issue has been marked as stale. This happened because:
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. |
Steps to reproduce:
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
The text was updated successfully, but these errors were encountered: