Bug 76159

Summary: Extraneous vertical scrollbar when displaying SVG content
Product: WebKit Reporter: pom
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Normal CC: zimmermann
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Mac (Intel)   
OS: OS X 10.7   
Attachments:
Description Flags
A red SVG circle element filling the whole page; unwanted space at the bottom of the body none

pom
Reported 2012-01-12 02:24:07 PST
Created attachment 122195 [details] A red SVG circle element filling the whole page; unwanted space at the bottom of the body When displaying SVG content in an HTML document with a body with no margin (i.e., the CSS margin property is set to 0 on the body element), the SVG content fills up the page as expected: the SVG element has the same height as the window innerHeight; however, the body element is for some reason a few pixels taller (I measured 4px recently), causing a vertical scrollbar to appear. Please find attached a test document that showcases the problem. The expected behavior is that html, body, and svg elements all have the same height, with the same value as window.innerHeight, and no scrollbar is displayed. This does not seem to be a problem caused by whitespace in the document or by the HTML vs. XHTML parser as far as I can tell. Google Chrome also shows the same behavior. As a workaround the "overflow: hidden" CSS property can be set on the body.
Attachments
A red SVG circle element filling the whole page; unwanted space at the bottom of the body (270 bytes, text/html)
2012-01-12 02:24 PST, pom 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
pom
Comment 1 2014-07-01 08:14:28 PDT
The problem actually comes from the fact that the default display CSS property for svg is "inline". Setting it to "block" gives the expected results.
Note You need to log in before you can comment on or make changes to this bug.