svg firefox bug

by Kitana

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div class="parent">
     <svg height="100px" width="100px" class="svg"></svg>
</div>
<div class="info"></div>

CSS

.parent {
  height:200px;
  width: 200px;
  background-color: seagreen;
}

.svg {
  background-color: tomato;
}

.info {
    font-size: large;
    line-height: 1.5;
}

JavaScript

var svg = $('.svg').get(0);
console.log(svg);

var width = svg.clientWidth;
var height = svg.clientHeight;
var rect = svg.getBoundingClientRect();
$('.info').text(`width are ${width}, height are ${height}. Though boundingClientRect are ${rect.width} and ${rect.height}`);