Page cut off at the bottom on browser resize with responsive design

[jamesnb1982]

I've implemented responsive design on my site by following the template laid out in Geometrixx media. I'm noticing that when I resize my browser and elements reflow, the bottom elements on the page are cut off and I can't scroll down to see them. The problem is fixed when I reload the page at that size, but then when I resize to full screen, I notice that there is extra white space on the bottom of the screen.

At first I thought this was an issue in the way I had implemented it, but looking closely at the original Geometrixx media page, I notice that it exhibits the same behavior. I've tried adjusting padding, margins, and position (absolute, relative, static) on every element I could find on the page, but nothing I do resolves the issue. This appears to be a bug in the way responsive design is implemented.

What do I do to fix this?

[smacdonald2008]

This does look like a bug. I recommend opening a ticket to see if you need a hotfix: 

[vmehrotr]

What AEM version is this? Any exception in logs or firebug or developer tools console?

[jamesnb1982]

It's AEM 6.1

These are the messages in the console. I don't believe they have much to do with the issue. Adobe's own example site isn't working properly. If it were something of this nature, they should have caught it.

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/granite.js:222:15

Deprecation warning: moment.lang is deprecated. Use moment.locale instead.moment.js:321:13

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/granite.js:222:15

‘mozHidden’ and ‘mozVisibilityState’ are deprecated.  Please use the unprefixed ‘hidden’ and ‘visibilityState’ instead.

Does the geometrixx media site display this behavior in 6.2?

[kautuk_sahni]

Seems like a bug. 

Please create a Support ticket.

~kautuk

[sara-cq-forum]

I experience the same issue when creating a new adaptive form in 6.2 

http://localhost:4502/aem/createaf.html/content/dam/formsanddocuments/geometrixx-gov?sourcePath=/aem...

Has this issue been fixed ?

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

TabView does not define an insert method for content zone tabList, falling back to replace.

[sandeepm744005]

Not sure about 6.2 but we faced the same issue when we were working in one of the 6.1 project and this is the fix which worked for us, page.css under page component which is overlayed in our /apps, we added below css change for body class.

/page/clientlibs/css/page.css

body {

                height:auto;

}