Why this gradient looks different in mozilla and chrome? In mozilla, everything looks as it should, but in chrome, for some reason, some areas are not displayed and blurring occurs.
<svg width="5300" height="90" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id='gradientId' x1='0%' y1='0%' x2='100%' y2='0%'>
<stop offset='0' stop-color='#0064B4'></stop>
<stop offset='0.002515382700630155' stop-color='#0064B4'></stop>
<stop offset='0.002515382700630155' stop-color='#913151'></stop>
<stop offset='0.09527011978636715' stop-color='#913151'></stop>
<stop offset='0.09527011978636715' stop-color='#0064B4'></stop>
<stop offset='0.7441916931233106' stop-color='#0064B4'></stop>
<stop offset='0.7441916931233106' stop-color='#913151'></stop>
<stop offset='0.7885253132219171' stop-color='#913151'></stop>
<stop offset='0.7885253132219171' stop-color='#0064B4'></stop>
<stop offset='0.8415160421151924' stop-color='#0064B4'></stop>
<stop offset='0.8415160421151924' stop-color='#913151'></stop>
<stop offset='0.9308121279875629' stop-color='#913151'></stop>
<stop offset='0.9308121279875629' stop-color='#0064B4'></stop>
<stop offset='0.9308226087488155' stop-color='#0064B4'></stop>
<stop offset='0.9308226087488155' stop-color='#988334'></stop>
<stop offset='0.9471725963029115' stop-color='#988334'></stop>
<stop offset='0.9471725963029115' stop-color='#988334'></stop>
<stop offset='0.9999956330161448' stop-color='#988334'></stop>
<stop offset='0.9999956330161448' stop-color='#0064B4'></stop>
<stop offset='1' stop-color='#0064B4'></stop>
</linearGradient>
</defs>
<rect rx="5" x="0" y="0" width="5300" height="90" fill="url(#gradientId)" />
</svg>