Problem with gradient in stroke

[SerDIDG]

Attach (recommended) or Link to PDF file here:
test.pdf

Configuration:

• Firefox (84.0b4):
• Windows 10 Pro (2004):
• PDF.js version: latest

Steps to reproduce the problem:

1. Open attached pdf file in pdf.js demo viewer.
2. Circle is not affected by gradient and significantly wider.

What is the expected behavior? (Latest Chrome)

What went wrong? (Latest Firefox)

I used Adobe InDesign to export my project into pdf which contains svg layers. Here is a sample of svg i used for a demo above:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
    <defs>
        <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="10" x2="90" y1="90" y2="10">
            <stop offset="0%" stop-color="#0a00b2"/>
            <stop offset="50%" stop-color="#ff0000"/>
            <stop offset="100%" stop-color="#fffc00"/>
        </linearGradient>
        <style>
            .circle {
                fill: none;
                stroke: url(#gradient);
                stroke-width: 2px;
            }
        </style>
    </defs>
    <circle class="circle" cx="50" cy="50" r="43"/>
</svg>

[janpe2]

Maybe a duplicate of #6769 and #10955.