Fullpage.js: Height size section not 100% afterRender / loading website

[CricriSDN]

Hi Alvaro,
Hope you're fine and not too busy because we still have a very weird behavior with section height size when browser window screen is reduced.

You can reproduce this issue with the demo (FF, Chrome or IE).

• Minimize screen to about 730x750 (or less) - don't use responsive view with firebug, reduce window directly
• Refresh, and you can see a border at the bottom, the following section above (the calculated height section is not 100%)
• If you resize, the height is well calculated

Tell me if you want any screen shot

[CricriSDN]

if it can help...
function styleSection. windowsHeight var at line 657 is not equal to $(window).height() IF window width is lower than 768

[alvarotrigo]

Tell me if you want any screen shot

Yeah I need it. Because I'm not able to reproduce it here.

[CricriSDN]

[alvarotrigo]

Make sure your browser is not caching any old CSS or JS file.
Press CTRL + F5 to force the refresh.

What operative system are you using? I can not reproduce it in Mac.

Could you record a video of it?

[CricriSDN]

On dev, we compile all sources so i'm sure there is no pb with caching. Also i force the refresh with the fullPage demo.

I'm on W8, but this is the same on WinXP (real machine, not a virtual OS). Don't have any mac here to test. We have this issue on Chrome, FF, IE.

i add some console.log and saw that : windowsHeight var at line 657 is not equal to $(window).height() IF window width is lower than 768

I made a short video of this issue http://cdn.studiodunet.com/fullPage/issue_1502_1.mpg

[alvarotrigo]

Thanks for it. I was able to reproduce it in Windows 7.
I'm not quite sure why it is returning the wrong value, it seems that the problem disappears whenever I remove the image of the last section.

The addition of the style overflow:hidden in the html element seems to be the cause of it.
Just before the statement $('html').addClass(ENABLED); both values are the same.

Therefore a solution would be to update the value after line 500:

$('html').addClass(ENABLED);
windowsHeight = $window.height();

Although not ideal.

[CricriSDN]

Although not ideal.

May be, but it works ! Many thanks Alvaro.

[RobR8]

Hey Alvaro,

I have the same issue, however I did notice I set animateAnchors: false and when I set it back to the default of animateAnchors: true it solved the issue. I don't know if it is a height issue or a scrollTop issue I am leaning towards the latter since the height looks good, it is just off by a few pixels.

Just thought I would let you know my findings in order to help track down the bug.

Thanks,
-- Rob

[alvarotrigo]

@RobR8 thanks, I'll keep an eye on it.

[alvarotrigo]

Solved in 2.7.2

[haowang-php]

why not use section.css('height', '100%') instead of section.css('height', windowsHeight + 'px')?

[alvarotrigo]

@roving-php read https://github.com/alvarotrigo/fullPage.js/issues/854. I has to do with the scrollOverflow option.

[ztoby]

using the latest version(2.7.6) I still got the same error in some browsers (15px smaller height due to vertical scrollbar appearing before init)
The problem appears only using Opera in my mac, but also using chrome and firefox on windows pcs
My workaround was to hardcode overflow-y to hidden for html as horizontal scrolling is not needed.

[krzysztofGwozdz]

I'm also have the same issue on latest version. Problem appears when I'm scroll back to the previous section, because on load div#fullpage has transform3d value equal (0, 0, 0) and when scroll down and again to first section this value now is (0, -15px, 0) instead of (0, 0, 0). I have no idea how I can workaround this case

[sashabeep]

Facing the same issue when scrolling backwards. Scroll in forward direction (from top to bottom) works well, but backwards are not. Sections seems to be offset with negative top margin or so

PS: looks like problem exists when using unzoom to non-100% screen size

[alvarotrigo]

@sashabeep I'm not able to reproduce it on the demo page or any of the examples online.
The problem is probably within your own code.

You can take one of the multiple examples provided in fullpage.js and start with it as the base for your project. Or just take a look at the diferences between them. Do not forget the compulsory Doctype at the very top, as detailed in the docs.