Problem scrollbar in Chrome

[a-d-w-s]

I noticed that in chrome it happens that when loading the page, sometimes the vertical scrollbar does not appear. If I delete the cookie plugin from code, the scrollbar is always displayed. Don't know where the problem might be?

I think it's probably caused by the div#cc--main sticking to the bottom of the page.

Thank You

[orestbida]

Hi @shadowx-jb,

can you share your config.? Does this happen in other browsers too?

[a-d-w-s]

No only chrome and it's really random. Try crawling the site and you'll see. (https://www.dextercycling.cz/)

cc.run({ autorun : true, current_lang: 'cs', page_scripts: true, force_consent : true, cookie_expiration : 365, cookie_domain: location.host.replace('www.',''), revision: 1, gui_options: { consent_modal: { layout: 'cloud', position: 'middle center', }, },

[orestbida]

I don't see any issue your domain.

Note that if you have force_consent enabled and consent (accept/reject) has not yet been given, the scrollbar will disappear (on all browsers) so that the user is "forced" to take an action before navigating the website.

[a-d-w-s]

I understand that, but if the user has already given his consent, it sometimes happens that I do not see the scrollbar in chrome. I have the latest version of chrome and it happens on websites where I have this cookie add-on. It's a coincidence, after scrolling the mouse or hovering over the top menu, the scrollbar will reappear. Now I managed to show it up to 25 times - see screen: https://www.dextercycling.cz/dexter.png

[orestbida]

I see.

Unfortunately I don't know what can cause this since I can't spot any css which might interfere with the scrollbar (especially when modals are hidden).

You could try settings an explicit overflow rule:

html, body {
    overflow-y: auto!important;
}

You could also try and see if disabling extensions makes a difference.

[a-d-w-s]

I think it is caused by this element <div id="cc--main" style="position: fixed; z-index: 1000000;" class="c--anim"></div>, which at some point will be added to the end ... If I deactivate the cookie plugin, then everything is fine.

What you are proposing did not help.

[orestbida]

If you think it is caused by cc--main, try overriding its styles:

#cc--main {
    position: revert!important;
    z-index: revert!important;
}

if that doesn't do anything, just for the sake of it, try hiding cc--main momentarily just to see if the issue still persists:

#cc--main {
    display: none!important;
}

[a-d-w-s]

It didn't help, it helped if I set that display: none! Important; So apparently chrome does not display a scrollbar when plotting at a certain element insertion speed.

#cc--main {
    display: none !important;
}

[orestbida]

Since I can't see the issue in your website (using chrome) and I don't know how to reproduce it, it's tricky to determine exactly what is causing this. Leaving this open until a viable solution is proposed.

[a-d-w-s]

Thank you. I add, I can't simulate it on the localhost server ... Only for production. Apparently, as I wrote, it depends on time and possibly different contexts of rendering.

[a-d-w-s]

I've tried one thing and link the init script externally - and whether it works ... that is, if I have an inline script in the page, and there is this:

window.addEventListener ('load', function () {

So that seems to be a problem ... any advice?

[a-d-w-s]

So one more finding, it's still happening randomly ... even if the script is loaded externally.

The solution might be if the div element <div id="cc--main" style="position: fixed; z-index: 1000000;" class="c--anim"></div> was the default display: none; and not from the beginning position fixed ... would your script be modified like this? I think that chrome sometimes fails to add an element that has a fixed position and therefore does not draw a scrollbar.

The correct solution should be to set the added element to display none by default;

Video: https://www.dextercycling.cz/screen-capture.webm

[orestbida]

Adding display: none will also remove the fade-in/fade-out transitions so this is not a viable solution for me.

You will have to either modify yourself the source javascript file or use the below suggested solution.

Place the fixScrollbar function before (or after) cc.run(...) and then call it inside the onAccept method. This code will detect if modals are visible; if they aren't => add display: none to the element with id="cc--main";

function fixScrollbar(){
    const html = document.documentElement;
    const ccMain = document.getElementById('cc--main');

    /**
     * Returns true if at least one modal is visible
     * @returns {boolean}
     */
    function modalsAreVisible(){
        return (
            html.className.indexOf('show--settings') > -1 ||
            html.className.indexOf('show--consent') > -1
        )
    }

    /**
     * If modals are not visible add 'display: none'
     */
    if(!modalsAreVisible())
        ccMain.style.display = 'none';

    const observer = new MutationObserver(function() {
        if(modalsAreVisible()){
            // Add 'display: block' if at least one modal is visible
            ccMain.style.display = 'block';
        }else{
            // Add 'display: none' if modals were just closed
            ccMain.style.display = 'none';
        }
    });

    /**
     * Observe 'html' element's classes
     */
    observer.observe(html, { 
        attributes: true, 
        attributeFilter: ['class']
    });
}

const cc = initCookieConsent();

cc.run({
    // ...
    onAccept: function(){
        fixScrollbar();
    }
});

[a-d-w-s]

It works, thank you very much!

[orestbida]

A much simpler solution would be to just use css. Don't know why I didn't think of this:

/* Hide cc-main if none of the modals are visible */
html:not(.show--consent):not(.show--settings) #cc--main {
    display: none!important;
}

This should achieve the same end result as the JavaScript code. Short, simple & light.