Почему Firefox не поддерживает режим смешивания-смешивания, когда viewBox SVG не соответствует его ширине и высоте?

Question

Я пытаюсь нарисовать перевернутую svgline на цветной фон. Он отлично работает в Chrome, но не в Firefox, если svg"s viewBox не соответствует его width а также height, Я делаю что-то не так или это какая-то ошибка в Firefox?

Вот пример: https://codepen.io/anon/pen/LOWqRY

HTML:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="101" height="100" stroke-width="10" viewBox="0 0 100 100">
  <g class="invert">
    <line x1="50" y1="0" x2="50" y2="100">
  </g>
</svg>

CSS:

html {
  background-color: purple;
}

.invert {
  stroke: white;
  mix-blend-mode: exclusion
}

На фиолетовом фоне должна быть зеленая толстая линия. Но в Firefox есть белая линия. Тем не менее, если изменить HTML-код, viewbox из svg соответствует его width а также heightНапример, путем изменения width атрибут из 101 в 100тогда линия зеленая.