Safari border-box height bug on 100% height img with padding on parent

Question

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

See this fiddle and test it on Chrome/Firefox versus Safari to see the difference: https://jsfiddle.net/Arko/66b9bt02/1/

Here is the full code for reference:

HTML:

<div>
  <img src="http://placehold.it/40x40">
</div>

CSS:

* {
  box-sizing: border-box;
}

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

img {
  height: 100%;
}

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.

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

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

(Tested in Safari 9.1.1 and Webkit Nightly 202811)

Answer 1

Add a wrapper for image with height 100%, padding 0:

https://jsfiddle.net/vgdz2Loj/

<div>
  <div class="wrapper">  
    <img src="http://placehold.it/40x40">
  </div>
</div>

.wrapper {
  height: 100%;
  padding: 0;
}