White space below footer (and body) in Chrome

Question

When I add to CSS:

body { overflow-x: hidden; } 

For some reason, I got a big empty space below the footer, but only in Chrome. I tested several browsers and everything is fine.

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

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

---

UPDATE

I tried all the suggestions below, but no solution works. I studied further and realized that the problem was not caused by the addition of "overflow-x: hidden"; on the element 'body' (or 'min-width: 960px;', which is mentioned in the comment).

The error occurred because almost every time you try to disable something for the body element in the Chrome inspector (F12), the space disappears.

I still can not understand what causes this problem. The white space is not even in the body element, but, as I see it, it appears under the "body" in Chrome.

Any idea?

Answer 1

Problem:

The problem is that bounceInUp animation bounceInUp 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 this was a side effect of inline-block ( .la-tekst a set to display:inline-block; ), but the anchor element occupied both its original space and the space specified from the 0% bounceInUp animation.

Decision:

Applying overflow:hidden to any of the following will work

(select 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 boundary area that the anchor tag occupies

 .la-tekst a { display: inline; } 

or

 .la-tekst a { display: block; } 

Two suggestions that I have given you will help solve the problem ... The first one will hide the bleeding children by its height or (including the superanimized anchor tag).

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

Answer 2

Use this code in the title.

 <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> 

Answer 3

Try adding this to your css

 .page{ overflow:hidden; } 

Answer 4

I had the same problem and fixed it. By adding a footer style div: style = "position: absolute; width: 100%;"

Answer 5

You will need to remove any default style for a browser with a normalizer, for example http://necolas.imtqy.com/normalize.css/

Answer 6

You can add this line to your css file. Empty space will not be displayed:

 div#goog-gt-tt{ display:none; } 

Answer 7

Delete CSS:

 body.front, body.page-node-18{ overflow-x: hidden; } 

Add CSS:

 body{ overflow-x: hidden; } .front, body.page-node-18{ overflow-x: hidden; } 

Answer 8

With a little testing, I realized that if you don't call new WOW().init(); then the page displays OK in Chrome with no extra space below the footer.

So this tells me that there is some incompatibility with your layout and the way the WOW library works in Chrome.

Perhaps you can focus your efforts there or raise a bug report on the WOW github page if this is really a problem with WOW and Chrome at https://github.com/matthieua/WOW

Answer 9

Define in css

 #omega-media-query-dummy { float:left; } 

Hope it fully helps you

Answer 10

Set position relative to; on the body tag.

Edit: I tried both chrome and Chrome canary. White space disappears.