White space below footer (and body) in Chrome

Question

When I add in CSS:

body {
overflow-x: hidden;
}

I got big white space below footer for some reason, but just in Chrome. I was test on a few browsers and everything fine.

Is this some browser bug or the problem is something else?

You can take a look at http://fc-translations.ch

---

UPDATE

I tried all the given suggestions below but neither solution is working. I was researching further and realized that the problem is not caused by adding 'overflow-x: hidden;' on 'body' element (or 'min-width: 960px;' which is mentioned in comment).

Omission happened because almost every time when you try to disable something for 'body' element in Chrome's inspector (F12), white space disappears.

I still can't figure out what is causing this problem. The white space is not even in the 'body' element but, as I can see, it appears below the 'body' in Chrome.

Any idea?

Answer 1

Problem:

The problem appears to be coming from the animation bounceInUp being applied to .la-tekst a.

The animation does the following:

@-webkit-keyframes bounceInUp {
        0%{opacity:0;-webkit-transform:translateY(2000px)}
        60%{opacity:1;-webkit-transform:translateY(-30px)}
        80%{-webkit-transform:translateY(10px)}
        100%{-webkit-transform:translateY(0)
    }
}

Perhaps it was a side effect of the inline-block (.la-tekst a is set to display:inline-block;), but the anchor element was occupying both its original space, and the space set from the 0% of the bounceInUp animation.

Solutions:

Applying overflow:hidden to any of the following will work

(pick one selector)

.page {overflow:hidden;}
.section-content {overflow:hidden;}
.zone-content-wrapper {overflow:hidden;}
.region-content {overflow:hidden;}
.region-content-inner {overflow:hidden;}
.block-block-1 {overflow:hidden;}
.la-tekst {overflow:hidden;}

or

Change the bounding area that the anchor tag occupies

.la-tekst a {
    display: inline;
}

or

.la-tekst a {
    display: block;
}

The two suggestions I provided will fix the problem... The first one will hide child elements bleeding past its height or (including the super-animated anchor tag).

The second solution will change the bounding area that the anchor tag occupies, so that it no longer occupies its animated space and its original space at the same time.

Answer 2

Use this code in your head tag

<script type="text/javascript">


 jQuery(document).ready(function(){

var docheight = jQuery(document).height();
var bodyheight = jQuery('body').height();
var bodywidth = jQuery('body').width();


/*alert(docheight+'--'+bodyheight);*/

if (bodyheight < docheight && bodywidth >= 1000) {

    $(".footer-class-name").css('position',"absolute");

    }


});
</script>