1px to much page height (also in demo)

[bej-soan]

Hi everyone,

I was looking why my page is 1px (maybe 2) extra always. So always a scrollbar and i can scroll 1px. I installed a fresh copy with the same result. Than I took a look at the demo and it's there too.

I can't really pin down the element causing this.

It happens in Chrome and Safari. Firefox is good.

Can somebody else confirm this?

[Aetles]

My guess is that this is caused by the javascript that calculates the sticky footer that was added some time ago, which can be found in stickyfooter.js. This code calculates a height that is added as margin-top to the footer (#footer-container) as inline style. Somehow this is off by a pixel or two, triggering the scrollbar.

[Aetles]

I haven't tried it myself (seems you can't edit javascript in Chrome dev tools if it's minified) but you could try to just change height = height - footer.height(); to height = height - footer.height() - 1; and see if that is enough to fix this.

[olefredrik]

@Aetles : I can verify that your solution works. Thanks! Fixed #563

[phylaxis]

I know you just fixed this, but I'm having a different and, I think, somewhat related issue that comes up when using a sticky top bar.

I'm using using this code in my parts/top-bar.php file:

<div class="top-bar-container contain-to-grid sticky">  
    <nav class="top-bar" data-topbar data-options="scrolltop: false" role="navigation">

When you do that it seems like top-bar height is not factored into the calculations made in stickyfooter.js so the sticky footer is off by the height of the .top-bar element.