Double-Scrollbar being caused by Header

Hey @tristup it seems now just great! Please would you sum rapidly what I should do? Remove all paddings and margins on all Cart elements? Then add the CSS you’ve created on all the Cart elements, on Custom/CSS? Thanks!

Hi @fabiofava,

You need to add this custom CSS to the Mini Cart > Customize > Element CSS under the Cart Dropdown, if you get any problem like this.

Hope it helps.
Thanks

Hi @fabiofava,

Glad that we are able to help you.

Thanks

Hey @tristup for some bizarre reason, the double-vertical-scrollbars are back!

It has worked today morning, now I’ve checked again and they’re back! Incredible! I’ll recreate a Staging Site so you folks can check it out to try finding what’s wrong…

Hi @fabiofava,

That is due to the custom CSS I provided, it needs to be implemented with the woocommerce-mini-cart class, I went ahead and replace that with the following one.

$el.x-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart
{
    padding:15px !important;
}

Thanks

Thanks again @tristup!

It seems to be working fine! I’ll delete the Staging Site (my server isn’t that powerful) and enable all cache layers at the Live Site, I hope it’s definitely nailed for now!

Thank you very much, cheers!

Hello @fabiofava,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks

Well… Unfortunately it still loads (very rapidly) a double-vertical-scrollbar when loading the pages. Please let me know if I need to re-create the Staging Site (and disable all caches again) for further testing. I can’t find what’s wrong…

Disabling WP Rocket Cache, then pages load without the double scrollbars… Would you help me finding what is causing it, or should I try the WP Rocket Cache Support Staff for that? Thank you so much once more!

For some reason I can’t explain (the code is the same of the other pages), there’s that page below that still loads the double-scrollbar while loading the page, even without WP Rocket enabled:

I cannot imagine what could be causing that… Please let me know, I may re-create the Staging Site in case you want to jump in and try finding it. I really hope we can find and solve that trick… Thanks!

Hi @fabiofava,

I have added the code into your staging site, you need to copy that to your live site and then clear all type of cache and then check. If you have followed the same process, then it might be a problem with the WP Rocket plugin. I would suggest you contact the Plugin Author on this and let us know the feedback on this.

Thanks

Hey @tristup

Sure thing I’ve copied the code to the Live Site on all 4 headers. Without WP Rocket it works fine. With WP Rocket active, then double-scrollbars appear while loading on pretty much the whole site.

The page at Galerias > Fotos Voo Duplo loads with double-scrollbars for some reason. This happens only when the page is loaded by clicking on the menu to access it, and not when loading the URL via address bar.

Also, even having the CSS for it, the mini-cart has no Padding despite it’s Custom CSS.

I keep wondering why just that page loads with that double-scrollbar, then how to find the way for WP Rocket not to add those double-scrollbars everywhere.

I hope you folks still have some breath to help me nailing this completely. Thanks!

Hi @fabiofava,

I have checked that page but didn’t find the Double Scrollbar on that. I would suggest you check by clearing all types of cache once again. If you still find the same, I would suggest you delete all the sections and check if that issue is resolved. If resolved, please undo (check screenshot) the deletion one by one and check if the issue comes back. And the last one you have reverted before getting the issue is the actual reason behind your issue.

Screenshot 2022-04-25 140706

Thanks

Hey @tristup,

You have to click on the Menu then the double-scrollbar loads (only on that page). Sometimes not at first, but fom 2nd time you click on the menu it always load double-scrollbars on the page Fotos Voo Duplo.

If you load the URL on the address bar it doesn’t appear, only by clicking on the menu option Galerias -> Fotos Voo Duplo so if you click on that menu item a few times (at least on desktop) you will be able to see it while the page loads. It load only for a fraction of a second. There’s some code or setting on that page causing that.

I’ve found that I need to remove the 4 first sections in order to the page to load without loading double-scrollbars. I’ve attempted to remove one by one, but seems that all of the 4 first sections below are causing the issue. I can’t find what is it, would you look into it?

  • Seção Hero
  • Seção Nargo Divider (9%)
  • Seção Fotos da Temporada
  • Seção 000013 Eduardo

Without these 4 top sections, the page loads properly. With any of them the issue happens. I’m sure there’s some option or CSS wrong on these. Please help me finding it, we are so close but I can’t find it! I hope you experts can find what I can’t… Anyway it loads the double-scrollbars only from the 2nd time you click on that menu, sometimes on the first click it won’t load double-scrollbars, but click again the menu then it loads.

There’s no cache at all. At server level and WordPress level they’ve been all disabled.

Hi @fabiofava,

I have already checked the specified page and didn’t find the problem as I specified it in last post. I have also created a test page by duplicating the content and that is also not showing the Double Scrollbar. I would suggest you clear the Hummingbird page cache and check. I would also suggest you go through my following comment and check the sections of the page.

Hope it helps.
Thanks

Hey @tristup, as I’ve said above, you need to click on the menu (sometimes it doesn’t load double at the first, just click again and it loads the page with double-scrollbar then it disappears). I’ve completely disabled Hummingbird, it has nothing to do with cache. I can garantee you that’s something on ALL the first 4 sections on the page.

I’ve already debugged. Removing all the first 4 Sections on that page it loads perfectly, so it’s surely something on all those 4 first sections. Adding ANY of them, double-scrollbars will happen on loading (then disappear in a 10th of a second, but it’s there for sure). Please check every element (and their Custom CSS) to see if you can find it, please…

Please try just removing those 4 Sections, then load the page (by clicking on the Galerias -> Fotos Voo Duplo menu, then a second time) . There’s no way it won’t load doble-scrollbars when having the first 4 Sections I’ve mentioned. With just ONE of them, it double-scrollbar, without ALL of them the page loads perfectly. I know it’s on those, but can’t find what is causing it.

I’ll keep looking forward from you on what’s going on at this page. Only this one. Then we’ll have to debug why WP Rocket (or any other cache) causes double-scrollbar when active.

Thank you very much for your continued patience and support.

Hey @fabiofava,

Thanks for performing the test.

The cause of the double scrollbars in Pro is content overflowing the container. It’s hard to see those overflows but there’s a quick solution for that and it is hiding overflowing elements by setting the Section’s Overflow option to Hidden.

image

If it still happens with WP Rocket enabled, regretfully, you need to reach out to a WP Rocket expert moreover that we do not provide support for 3rd party plugin issues. What we can just tell you is that builder-generated CSS are Inline. WP Rocket might do things to the CSS which we cannot support.

Hope that helps and thank you for understanding.

Hey @christian thanks for the infors.

Unfortunately isn’t that. All sections, lines & columns have Overflow = Visible on ALL pages. So this can’t be the cause. We really need to find the actual cause of that. Hide it won’t make it go away.

Please give some more attention to it. You’ve duplicated the page Vídeos Voo Duplo, wich never had an issue from the start. The erratic page is Fotos Voo Duplo, that can be found inside the Galerias menu.

I hope you can give me some help. It’s there, it’s not caused by “overflow=visible” so we really need to get it and find what’s actually causing it. Thank you for your continued help, patience and support. Cheers!

Hey @fabiofava,

Overflow may or may not cause the double scrollbar so please try setting the Overflow of all sections on the affected page to Hidden. Assuming is not good when you’re troubleshooting. You need to try solutions moreover that the cause of this double scrollbar case is hard to catch. :slight_smile:

You can get back to us if it’s really not the Overflow Visible.

Thanks.

Thanks @christian

The problem of this is, again, ALL sections, lines and columns on ALL pages have this Overflow = Visible withtou ANY issues on ANY page. Also, this will much likely cause issues on one or other breakpoint, wich invalidates it as a solution.

Please be free to test it, but as said, it’s not a solution. Thank you for your continued patience and support, cheers!

Hey @fabiofava,

I understand your point but the problem is that’s just an assumption. The Overflow Hidden solved double-scrollbar issues in some cases. Please try and prove that it doesn’t work. We cannot assume. Like Tristup, you need to try as the double scrollbar doesn’t happen on my end too even when the page is still loading. It’s only happening on your end so you need to test the Overflow Hidden and see if it fixes the issue. If it causes a different issue then we’ll solve it next. Just try it first.

I’m sorry but we cannot proceed to look into other options if that’s not tested.

Thank you for understanding.

Hey @christian, feel free to test whatever you want on the Staging Site, you have the credentials. But I’m sure the problem is not that, since every other page on the site, with all Sections, Lines and Columns having that option just the same, show no issue on any other page. Feel free to do all tests you want, thanks.

The double-scrollbar is there on that page, no matter what you folks say. It’s there, every time it loads (clicking on the menu) it loads with double-scrollbar than disappears. Every other page with Overflow Visible on every Section, Line and Column, are working 100% without double-scrollbars or any other issues. Please look the video below.

Please confirm so I can delete the video from Vimeo. I’ve made just as a proof. If the problem was the Overflow Visible, we should see issues on every page of the site, but we don’t. Just that one page. On the 4 first sections… Something else.