title: Why is there a vertical scrollbar on my svg at 100%?
body: <p>Can somebody explain why I see a vertical scrollbar in Chrome and IE9 with the following markup:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Fullscreen SVG&lt;/title&gt;
  
      &lt;style&gt;
        html,body {
          margin: 0px; padding: 0px;
          width: 100%; height: 100%;    
        }
  
        .fullscreen {
          width: 100%; height: 100%;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;svg class="fullscreen"&gt;&lt;/svg&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;div class="fullscreen"&gt;
    &lt;svg&gt;&lt;/svg&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>Changing the doctype to XHTML seems to fix the problem:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  </code></pre>
  
  <p>But inline SVG is a part of HTML5 so...</p>
  
  <p>In the meantime I also filed a <a href="http://code.google.com/p/chromium/issues/detail?id=70487" rel="noreferrer">bug report</a>.</p>