Sidebar disappears on Chrome Browser on scroll

[dshakya]

Hi,

When I load the website on Chrome browser, the sidebar with map appears/briefly appears on reload and then disappears. Firefox, Edge and even IE load fine. If I go to Developers window and say turn on/off the float property of the sidebar, it appears on screen but toggle the property after that does not seem to have any affect on the sidebar. Looks like something to do with the layout loading… but absolutely no idea why this happens on Chrome.

I have cleared all cache and also tried on incognito mode with the same result. There is nothing in Console log. I can’t seem to figure out why this happens. I have disabled the “Scroll to top” in Theme Options thinking this was related to scrolling function. Nothing seems to make it go away on Google Chrome (Version 76.0.3809.132).

Any help is appreciated.

[ruenel]

Hello Deepak,

Thanks for writing in!

I have checked your site on my Chrome (Version 76.0.3809.132) browser and I do not see any issues at all.

Can you please disable you Cache Breeze plugin and test your site again?

Please let us know how it goes.

[dshakya]

Hi @RueNel,

The issue still persists. I have deactivated the Breeze cache plugin, cleared cache, reinstalled Chrome, purged content from CDN.

Were you able to scroll through the pages up and down and the map on the sidebar still appears? Other pages under the Estuaries menu also has the same issues with sidebar. The sidebar loads sometimes and when you refresh the page, the behaviour comes back and it disappears.

Thanks for investigating.

[ruenel]

Hello Deepak,

Please have your custom code updated and use this instead:

body.page:not(.page-id-427) .x-sidebar {
    position: fixed;
    left: 0px;
    top: 0;
    background-color: white;
}

The top: 0; is missing in the code which is why sometimes, the map will not display. Setting the top to 0 will always make sure that the sidebar will display in its place.

Please let us know how it goes.

[dshakya]

Hi @RueNel,

Thanks for the solution. This worked! Don’t know why it worked with other browsers and were more forgiving than Chrome.

          $('.x-sidebar').css("top", $masthead + $wpbar );        

I had to take into consideration the WP bar as well for when logged in and the header when logged off.

Thanks for this solution. Really appreciate your help on this one.

[ruenel]

Hey Deepak,

You’re welcome!
We really appreciate for letting us know that it has worked for you.

Cheers.