Home/ Questions/Q 4058830
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T15:07:45+00:00

Can somebody explain why I see a vertical scrollbar in Chrome and IE9 with

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0