[Bug]: Gradient on text fill doesnt work on chrome 111 and above

[ebigtm]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

5.3.0

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

None

Link To Reproduction

https://jsfiddle.net/EYBTM/ohqsj72b/14/

Steps To Reproduce

As you will see in the fiddle when openning on an updated chrome (checked on both mac and windows but not linux)
the text which should be on the black box is lacking, if opened on an older version of chrome or any other browser (even updated edge) the text appears

What i found is that if i disable GPU rasterization under
chrome://flags/#enable-gpu-rasterization

the issue will not happen

I was testing regular canvas on text and it appears fine:
https://jsfiddle.net/EYBTM/s957ge3y/1/

Expected Behavior

The text should appear with gradient

Actual Behavior

text is transparent

Error Message & Stack Trace

No response

[ebigtm]

btw it happens on any older version of fabric as well

[iocoker]

@ebigtm Can you check this if it works for you?: #8168 (comment)

[ebigtm]

@iocoker works like a charm! exactly what I was looking for thanks!!!

[ebigtm]

@iocoker ok now i see theres a problem with the angles
here are how it should be and how it looks, I will try to fix it and updated you
https://drive.google.com/open?id=1tro8wDorEBlwpOcflQLhoWvmyGGCFfJZ&authuser=elad%40flowmo.design&usp=drive_fs

[iocoker]

@ebigtm You're right, the angle is off. @ShaMan123 any pointers please ?

Also forgot to add a Radial to the hack:
`

			let coords = {
				x1: this.width * filler.coords.x1,
				y1: this.height * filler.coords.y1,
				x2: this.width * filler.coords.x2,
				y2: this.height * filler.coords.y2,
				r1: Math.abs(filler.coords.r1 || 0) * Math.max(this.width, this.height),
				r2: Math.abs(filler.coords.r2 || 0) * Math.max(this.width, this.height),
			};

			let gradient = filler.type === 'linear'
							? ctx.createLinearGradient(coords.x1, coords.y1, coords.x2, coords.y2)
							: ctx.createRadialGradient(coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2);

`

[ShaMan123]

We have a failing visual test that might be related.
I can link it when I am in front of my machine.
I refactored fillers in a PR and tried to change how fabric render gradients to cache using transfomations... because now is is weird and wasteful.
We need to revisit that.
You are welcome to look.
I will add the pr ref here.
I don't remember what this is all about because a long time has passed.
It is important to reproduce without fabric to eliminate it is not a browser bug.

[ShaMan123]

#8263

[ShaMan123]

I read you triaged it to be a chrome bug. Is that correct?

[ShaMan123]

https://github.com/fabricjs/fabric.js/blob/master/test/visual/text.js#L212

I think that is the test
Run in with:
npm test -- -d -c chrome

[ebigtm]

@ShaMan123 yes only chrome bug and only on version 111 and 112 of chrome (edge works fine!)

thanks! Will look into it

[ShaMan123]

Happy to see you back

[ShaMan123]

If both you guys want to help me with 2 clicks then enter the following link and add a thumbs up reaction to the description

microsoft/vscode#173782 (comment)

[iocoker]

Thanks, done. I'll get a few colleagues to upvote for you tomorrow when I get to the office.

[iocoker]

Yeah, the test ran fine

[Tomasgb97]

I have a similar issue happening when i use an image to mask a text and use it as a background, works just fine on firefox, but not on chrome, has someone found the same problem or simillar ? the gradient pattern solution doesnt seem to work in this case.