SVG feDiffuseLighting in Chrome vs Firefox

Question

Greeting. I faced wierd problem I've got next.js project (default config) with svg filter

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id='roughpaper'>
        <feTurbulence type="fractalNoise" baseFrequency='0.02' result='noise' numOctaves="5" />
        <feDiffuseLighting in='noise' lighting-color='white' surfaceScale='2'>
            <feDistantLight azimuth='45' elevation='60' />
        </feDiffuseLighting>
    </filter>
</svg>

and import like this

import styled from 'styled-components';

export const Paper = styled.img`
  position: absolute;
  width: 100%;
  height: 100%;
  filter: url('/filters/paper.svg#roughpaper');
  opacity: 0.5;
`;

Reference here And it works properly for me in Chrome and Firefox (looks like white paper)

But in next project there is a big differences. For Firefox it looks like this

And for Chrome like this

Does any body know, why could it be?

I've already tried to set color-interpolation-filters="sRGB", but it changes nothing.

Answer 1

Well, I've tested different solutions. And the only thing that works properly is just put this svg inside html code of the page and do not import it from outside. Looks like there is some issue with next.js and it should be imported in some other way. Didn't found proper one yet.