<div style="height: 0; width: 0; position: absolute; visibility: hidden"> create a white box at the bottom of the page
dannypk opened this issue · 4 comments
dannypk commented
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 commented
@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 commented
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 commented
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;
}
