<div style="height: 0; width: 0; position: absolute; visibility: hidden"> create a white box at the bottom of the page

[dannypk]

If I put top:0 manually, it disappears. Otherwise, I have an extra white box at the bottom of the page. Any idea why ? It's both firefox/chrome mobile/desktop view. Thanks

[w0rm]

@dannypk I guess it is because an svg inside the div has bigger dimensions. Setting width and height on the div doesn't hide the overflowing content

[w0rm]

You may try to either apply the style on the svg itself, or set overflow:hidden. The idea is to have svg visually hidden, because simply setting display:none may break svg content (like gradients) in some browsers.

[w0rm]

Alternatively, you may use visuallyhidden from html5 boilerplate,

https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L128

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

[10n37]

@w0rm it doesnt work normally with tables...