RESOLVED CONFIGURATION CHANGED 127995
SVG with small height inside pixel sized div renders below div 
https://bugs.webkit.org/show_bug.cgi?id=127995
Summary SVG with small height inside pixel sized div renders below div
Hugh Zhang
Reported 2014-01-31 08:40:53 PST
With the following SVG, the black rectangle should render inside the div with red border. It renders about 5 pixels below the div instead. <div style="border: 1px solid red;width:100px;height:5px"> <svg> <rect width="100" height="5" fill="black"> </svg> </div> The issue becomes less severe as div height increases, disappearing completely at around 14 to 15 pixels: <div style="border: 1px solid red;width:100px;height:14px"> <svg> <rect width="100" height="5" fill="black"> </svg> </div>
Attachments
Add attachment proposed patch, testcase, etc.
Hugh Zhang
Comment 1 2014-01-31 09:13:53 PST
Apparently this only happens with <!DOCTYPE HTML>. It doesn't reproduce with <!DOCTYPE HTML PUBLIC>. <!DOCTYPE HTML> <html> <body> <div style="border: 1px solid red;width:100px;height:5px;"> <svg> <rect width="100" height="5" fill="black"/> </svg> </div> <br/> <div style="border: 1px solid red;width:100px;height:14px"> <svg> <rect width="100" height="5" fill="black"/> </svg> </div> </body> </html>
Hugh Zhang
Comment 2 2014-01-31 09:21:34 PST
Sorry about not getting this all in the original report. It looks like this issue is connected to the font-size. If "font-size:1px;" is set on the outer div, then the issue doesn't occur. Similarly, if a larger font-size is set, then the issue occurs for larger elements.
Philip Rogers
Comment 3 2014-02-02 19:28:44 PST
This appears to happen with an <img> as well: <div style="border: 1px solid red;width:100px;height:5px"> <img width="100" height="5" src="[img here]"> </div> This may be a bug in all replaced elements (svg, img, etc).
Brent Fulgham
Comment 4 2022-07-15 17:30:13 PDT
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.
Note You need to log in before you can comment on or make changes to this bug.