Overview: When including an SVG element within a parent element that uses `box-sizing: border-box`, the relative height of the SVG element seems to be miscalculated. Steps to reproduce: - Create an enclosing block element with the `box-sizing: border-box` directive. - Add a padding value > 0 for this enclosing element. - Create an inner SVG element with the `height: 100%` directive. - Observe that the SVG element has a height that is too short by a factor of 2x the parent's padding. Expected results: I would expect an SVG element to be sized identically to a `<div>` element that uses `box-sizing: border-box`, as here: https://jsfiddle.net/p9ke6bo9/ Note that the underlying black box forms a 10px "border" all around the white box. Actual results: When you change the `<div>` element to `<svg>` in the example above, the black outline grows to 30px at the bottom: https://jsfiddle.net/p9ke6bo9/1/ This seems to be because the `<svg>` element is subtracting 4 * 10px (instead of 2 * 10px) from the parent element's height. Additional example: When you remove the `box-sizing: border-box` directive from the outer element, the inner `<svg>` element draws correctly: https://jsfiddle.net/p9ke6bo9/3/
Created attachment 271022 [details] black-screen-shot When opening https://jsfiddle.net/p9ke6bo9/1/, sometimes I get whole page filled with black. See the attached picture black-screen-shot.
Ran into this bug today (I think). > - Observe that the SVG element has a height that is too short by a factor of 2x the parent's padding. My elements end up too tall. https://jsfiddle.net/nj5a0dyq/ Playing with some paramters led me to the following findings: - Behaves as expected as long as the sum of padding-top + padding-bottom is less than half the container's height - Any padding, top or bottom, beyond half the container's height causes the <svg> to become that much taller instead of making it that much shorter (expected behaviour)
<rdar://problem/97102170>