SVG property vector-effect="non-scaling-stroke" still scales stroke

Question

In SVG, I need the PATH stroke width to remain as is while viewBox property is changing. The SVG property vector-effect="non-scaling-stroke" should accomplish that but it is not working as it suppose to.

Can someone explain why in the code below (check the codepen.io) the stroke width still increases as viewbox changes? I would also appreciate a solution that makes strokes width constant regardless of viewbox.

https://codepen.io/anon/pen/eKQrYL

HTML

<div class="Item">
  <div class="Item-graphic">
    <svg id='scaling-stroke' width="200" height="200" viewBox="0 0 50 50">
      <circle cx="25" cy="25" r="20" fill="none" stroke="#fff" stroke-width="2"/>
      <path d="M25 15 L 25 35" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
      <path d="M15 25 L 35 25" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
    </svg>
  </div>
  <span>
    50 x 50 view box<br>
    200 x 200 dimensions<br>
    no vector effect
  </span>
</div>
<div class="Item">
  <div class="Item-graphic">
    <svg id='non-scaling-stroke' width="200" height="200" viewBox="0 0 50 50">
      <circle cx="25" cy="25" r="20" fill="none" stroke="#fff" stroke-width="2" vector-effect="non-scaling-stroke"/>
      <path d="M25 15 L 25 35" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke"/>
      <path d="M15 25 L 35 25" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke"/>
    </div>
  </svg>
  <span>
    50 x 50 view box<br>
    200 x 200 dimensions<br>
    vector effect
  </span>
</div>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: #2196F3;
  font-family: Helvetica, sans-serif;
  font-weight: 300;
  line-height: 1.5;
}

svg {
  display: block;
  margin: 0 auto;
}

.Item {
  flex: 0 0 200px;
  padding: 0 1rem;
  color: rgba(#fff, 0.6);
  font-size: 11px;
  text-align: center;
}

.Item-graphic {
  display: flex;
  align-items: center;
  height: 220px;
}

JS

n=1;inc=1;
cvb = function(){
  vb = '' + n
  vb += ' ' + n
  vb += ' ' + 2*(25-n)
  vb += ' ' + 2*(25-n)
  $('#non-scaling-stroke').attr('viewBox', vb)
  $('#scaling-stroke').attr('viewBox', vb)
  n += inc;
  if (n<=1 || n>=24) inc *= -1;
  setTimeout(cvb, 100);
}; 
cvb() 

Answer 1

It is a bug in Chrome. The bug report is here https://bugs.chromium.org/p/chromium/issues/detail?id=849080. It was fixed in Chrome version 68.0.3440.25.