Google chrome SVG模式与viewBox在Safari和Chrome中的显示方式不同

下面的svg段定义了一个带有主要/次要线条的图形。它在Chrome中的行为与预期一致。但是每一个正方形的结尾小线与主线不对齐。知道为什么吗

<svg width="8in" height="11in" viewBox="0 0 960 1320">
    <defs>
        <pattern id="smallGrid" width="12" height="12" patternUnits="userSpaceOnUse">
            <path d="M 12 0 L 0 0 0 12" fill="none" stroke="gray" stroke-width="0.5"></path>
        </pattern>
        <pattern id="grid12" width="120" height="120" patternUnits="userSpaceOnUse">
            <rect width="120" height="120" fill="url(#smallGrid)"></rect>
            <path d="M 120 0 L 0 0 0 120" fill="none" stroke="blue" stroke-width="1"></path>
        </pattern>
    </defs>
    <rect fill="white" height="800" width="800" y="0"></rect>
    <rect fill="url(#grid12)" height="360" width="360" y="0"></rect>
</svg>