Safari border-box height bug on 100% height img with padding on parent
<p>When using <code>box-sizing: border-box</code> in Safari, there is a bug affecting the height of an <code>img</code> element when using <code>height: 100%</code> and a padding on the parent element.</p>

<p>See this fiddle and test it on Chrome/Firefox versus Safari to see the difference: <a href="https://jsfiddle.net/Arko/66b9bt02/1/" rel="noreferrer">https://jsfiddle.net/Arko/66b9bt02/1/</a></p>

<p>Here is the full code for reference:</p>

<p>HTML:</p>

<pre><code>&lt;div&gt;
  &lt;img src="http://placehold.it/40x40"&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>* {
  box-sizing: border-box;
}

div {
  padding: 15px;
  height: 50px;
}

img {
  height: 100%;
}
</code></pre>

<p>With border-box sizing, the img height should be 20px (50px div height minus 2x 15px padding). This is correct in Chrome and Firefox. But Safari displays the image at 30px height.</p>

<ul>
<li>If we test this in the width instead of height, no issue.</li>
<li>If we remove the padding or comment-out the border-box style, no issue.</li>
<li>If we test this with an other block element such as a div instead of an img, no issue.</li>
</ul>

<p>I found no other instance of this issue reported. Is this a new webkit bug to be reported? Or am I missing something?</p>

<p>(Tested in Safari 9.1.1 and Webkit Nightly 202811)</p>