Lock Safari issue

Lock Safari issue

by Csaba Hellinger

HTML

<div class="topLeftIcon">
<div class="reactSVG-wrapper">

<svg xmlns="http://www.w3.org/2000/svg" class="injected-svg" data-src="/static/plugins/icons/lock_fill.svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="/* display: none; */" viewbox="0 0 24 24"><path fill="#172631" fill-rule="evenodd" d="M12 2c3.81 0 6.857 3.126 6.857 6.939v1.632h1.714a.42.42 0 0 1 .429.409v10.612a.419.419 0 0 1-.429.408H3.43a.419.419 0 0 1-.43-.408V10.98a.42.42 0 0 1 .429-.409h1.714V8.94C5.143 5.126 8.19 2 12 2zm0 11c-1.105 0-2 .87-2 1.944 0 .4.237.884.71 1.451.058.07.09.156.09.245v2.971c0 .215.18.389.4.389h1.6c.22 0 .4-.174.4-.389v-3.11c.486-.356.8-.92.8-1.557C14 13.871 13.105 13 12 13zm0-8.551c-2.345 0-4.286 1.99-4.286 4.49v1.632h8.572V8.94c0-2.5-1.941-4.49-4.286-4.49z" style="/* display: none; */"></path></svg>

</div>
</div>

<p>
This icon is sized very differently on Chrome (good) and Safari (bad).
</p>

CSS

body {
  background: #222;
  color: white;
}

.topLeftIcon {
  display: inline-block;
  width: auto;
  height: 1.333rem;
}

.reactSVG-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}

svg {
  /* change `width` to `auto` to fix it */
  width: 100%;
  height: 100%;
  background: pink;
}