Menu
Can somebody explain why I see a vertical scrollbar in Chrome and IE9 with the following markup:
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen SVG</title>
<style>
html,body {
margin: 0px; padding: 0px;
width: 100%; height: 100%;
}
.fullscreen {
width: 100%; height: 100%;
}
</style>
</head>
<body>
<svg class="fullscreen"></svg>
</body>
</html>
If I replace the svg with a div it works perfectly. But if I put the svg inside that div, the layout is broken again:
<div class="fullscreen">
<svg></svg>
</div>
Changing the doctype to XHTML seems to fix the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
But inline SVG is a part of HTML5 so...
In the meantime I also filed a bug report.
281
I'm a little late here, but I stumbled across this when I was trying to solve a different problem.
I don't think what you're experiencing is a bug. The SVG tag is an inline element by default (for the record, IMG tags are too) and DIVs are considered block elements. I'm thrown off a little here because you aren't supposed to be able to set height/width to inline objects (If you tried to do this on a SPAN, the height/width is ignored).
You might consider this another workaround, but explicitly setting the display property to block removes the scrollbar. Floating the SVG element would also fix this.
.fullscreen { display: block }
It appears that the HTML5 DOCTYPE is based off of the W3C's strict DOCTYPES (not the transitional). Both strict declarations also display the scroll bar.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
So at this point, it might be best to refer to a different discussion if you care about strict vs transitional DOCTYPES: Browser Rendering Difference Between strict/transitional DOCTYPEs
Hopefully this adds a little value to value to the discussion.
100
To build on Corey's answer, inline or inline-block elements are called "inline" because they are intended to be laid out amongst lines of text. So, wherever they appear, space is reserved for the "descent", which is the area underneath a line of text where the dangly parts of lowercase g's, j's, and y's go.
So that's where the extra space comes from when your svg element has display: inline. You can manipulate the amount of space reserved with the line-height property, or you can remove it altogether by setting display: block, as Corey noted.
I believe you're able to set the height and width on img and svg elements because they are, in CSS parlance, "replaced" elements, and behave a little differently than regular inline elements. The CSS spec explains how this works in more detail. And as far as specs go, it's actually pretty readable.
15
The easiest solution would be to just add the CSS rule overflow:hidden to the html and/or the body tag.
html, body { overflow:hidden; }
Edit
Another solution would involve using the XHTML doctype. This works in Chrome, and I suspect it works in IE9.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
