<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - SVG content renders in incorrect vertical position when padding-left is not specified"
href="https://bugs.webkit.org/show_bug.cgi?id=158234">158234</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>SVG content renders in incorrect vertical position when padding-left is not specified
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari Technology Preview
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>OS X 10.11
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Layout and Rendering
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>thecoreh@gmail.com
</td>
</tr>
<tr>
<th>CC</th>
<td>simon.fraser@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=280177" name="attach_280177" title="Test case reduction">attachment 280177</a> <a href="attachment.cgi?id=280177&action=edit" title="Test case reduction">[details]</a></span>
Test case reduction
Found a rendering bug in WebKit related to SVG and padding.
If you have an <svg> element inside a <div>, and you specify a non-zero padding-top value for the SVG element, but keep the padding-left property as 0, the element content gets rendered as if padding-top was 0. Specifying a padding-left of 1px makes the rendering normal. The same bug doesn't seem to happen with padding-right. The problem seems to be only related to the rendering of the SVG content, since layout seems to be normal on the Web Inspector. All other major browsers seem to agree on the rendering. (Screenshots below)
Attached is a test case reduction for the bug.
Rendering in Safari Technology Preview: <a href="https://cldup.com/hti9HBL7Df.png">https://cldup.com/hti9HBL7Df.png</a>
Rendering in Firefox: <a href="https://cldup.com/N6V1hKJvdL.png">https://cldup.com/N6V1hKJvdL.png</a>
Rendering in Chrome: <a href="https://cldup.com/B8RxpaeDN2.png">https://cldup.com/B8RxpaeDN2.png</a>
Rendering in Edge: <a href="https://cldup.com/Y30FAbpYaU.png">https://cldup.com/Y30FAbpYaU.png</a>
Layout as per the Safari Technology Preview Web Inspector: <a href="https://cldup.com/V4ZCGl0zrC.png">https://cldup.com/V4ZCGl0zrC.png</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>