Docs

[envato_2015]

When using a non-footer template, css rule .x-container.main:before causes a duplicate vertical scrollbar making vertical scrolling extremely sloppy, especially on mobile.

Steps to reproduce:

1. go to http://demo.theme.co/ethos-1/
2. remove top and bottom footer from DOM
3. X-perience a second vertical scrollbar

Probably something about collapsing margins not happening if there’s no element following .x-container.main.

Two solutions came up to my mind:

1. .x-container.main:before { bottom: 0; } (keeping it all in one rule)
   or
2. .x-container.main:after { display: block; }

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

body {
    overflow: hidden;
}

Hope that helps.

[envato_2015]

Thank you for your instant reply.

Since this is a core bug, you should fix it inside X itself using one of the supplied solutions above or by implementing your own.

[Christian]

Hey there,

Please give us the URL of the page you’re having issue with so we could see the setup. Also give us access to your WordPress admin.

We could not consider this a bug by removing elements in the DOM only. I enabled a no footer template in my test site but I don’t get this issue.

Thanks.

[envato_2015]

Here comes a more generic test case (validated in both Chrome and Firefox):

1. create a new page
2. set its template to “Blank – Container | No Header, No Footer”
3. add some content
4. visit the page
5. resize the window vertically to become smaller than the content
6. X-perience the duplicate vertical scrollbar

Fix:

.x-container.main:before {
    /* top: 0; not sure if this is safe to be left out for every case */
    bottom: 0;
}

.

[Rue Nel]

Hello There,

Thanks for updating in! I have carefully followed the steps and I could not replicate the issue. I am just seeing this: http://prntscr.com/dw4u7m

Could you please provide us with a screenshot or a video capture so that we will have an idea of what is going with the issue?

Thank you very much.

[envato_2015]

Hi,

built another test from scratch with all plugins disabled. Even commented out all custom css generated by X (made no difference, though). The page contains a single paragraph and has its template set to “Blank – Container | No Header, No Footer”.

Result as shown in the screenshot (upper gray line is the bookmarks bar). If the window is large enough to contain all content at once, a single scrollbar will be there nonetheless. Upon reducing window height, a second scrollbar will appear.

Full HTML source can be found at http://pastebin.com/wVKuMwgt Links are all relativized so you can just save this in a file inside document root and see if you can reproduce the issue.

WP 4.7.1
X 4.6.4

Tested with

• Chrome 55.0.2883.95
• Firefox 50.1.0

[Christian]

I’ve followed your instruction yet I don’t get this issue. See http://dev-nisardfi.pantheonsite.io/test/. Please try clearing your browser cache. Please also give us access to your WordPress admin and what OS and browser you’re using.

Thanks.

[envato_2015]

Thank you for your instant reply containing your testing site url which finally shed some light!

Please show some love for the thread title and set your stack to Ethos accordingly. The rule causing the second scrollbar can only be found in wp-content/themes/x/framework/css/src/site/_scss/stacks/ethos/_scaffolding.scss

No other stack seems to contain any element addressed by .x-container.main as well.

[Christian]

Sorry I missed it. I’ll report this to our development team.

Thanks.

[Author]

Posts