Hatch pattern doesn't work on iOS with D3js v5

I need help about pattern on D3js v5. I want to fill a rect with a diagonal hatch, it's works fine on Android but not in iOS.

I'm using Ionic 5 with cordova.

Actual Result on iOS : Black rectangle

This is what i am doing :

this.svg = d3.select('#timeline');
this.svg.append('defs').append('pattern')
    .attr('id', 'diagonalHatch')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 4)
    .attr('height', 4)
    .append('path')
    .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2')
    .attr('stroke', 'red')
    .attr('stroke-width', 1);

this.rect = this.g.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attrs({ 
        x: (d) => { return this.x(new Date(d.startTime)) },
        y: (d) => { return this.y(d.task) },
        width: (d) => { return this.x(new Date(d.endTime)) - this.x(new Date(d.startTime)) },
        height: yTicksSpacing,
        fill: (d) => { return d.task == "Waiting" ? 'url(#diagonalHatch)' : d.color }
    }).on('click', (d, i, targetElement) => {
        d3.select("#tooltip").selectAll("*").remove();
        this.showTooltip(d,targetElement[i]);
    });