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