Chrome上奇怪的SVG掩码行为

<svg width="400" height="400">
  <defs>
    <mask id="mask" x="0" y="0" width="400" height="400">
      <rect x="0" y="100" width="400" height="100" fill="#FFF"></rect>    
    </mask>
  </defs>
  <g mask="url(#mask)">
    <rect fill="#BBB" x="0" y="0" width="400" height="400"></rect>    
  </g>
</svg>

在Chrome上,它呈现为3个灰色矩形(其中两个对滚动有反应),而我认为它应该只有一个矩形(firefox和edge是这样呈现的)

corresponding image (左:边缘/firefox |右:chrome)

代码笔: https://codepen.io/zworek/pen/gGbgPL

我在这里定义的是错误的还是纯粹是Chrome的bug?

我的Chrome版本是60.0.3112.113 x64