[Bug]: Invisible text when a gradient or pattern is applied

[u-blusky]

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/yrpuqvec/

Steps To Reproduce

1. Create Text object
2. Apply gradient
3. The text is invisible

Expected Behavior

Text fill with gradient and visible

Actual Behavior

Error Message & Stack Trace

No response

[ShaMan123]

I think it is a priblem is chrome, our tests also fail in this aspect.
Try seeing if toggling objectCaching makes adifference

[u-blusky]

Hi,
I tried with objectCaching, statefullCache, dirty but, unfortunately, it doesn't solve the problem.

[u-blusky]

Maybe I found:
In Chrome, Use hardware acceleration when available = false
and the text is drawn correctly.

[tonycaso]

Disabling hardware acceleration makes browser crashing in some situations when using patterns.
changing gradientUnits to pixels makes text visible(no need to disable objectCaching),
This issue in my case only happens with patterns and also fails in Edge browser.

[ShaMan123]

Thanks for reporting
Reproduction will be great, a pr even more

[u-blusky]

@tonycaso, @ShaMan123
thanks a lot.
Using "pixels" works.
I created a new fiddle to test this:
https://jsfiddle.net/y30ge8fx/1/

[u-blusky]

Unfortunately the "linear" type is not right for how I set up the code.
I tried to debug but I don't understand where the problem could be.
The gradient is created correctly and I don't receive any error messages.
It works in Firefox. I don't understand what could cause problems if I use the "percentage" type in Chrome; and also because it works with the "linear" type.
If anyone can give me an idea.

Thanks a lot,
Blu

[ShaMan123]

I managed to triage the bug to fabric:
_applyPatternGradientTransformText

I remeber this...
Disabled the entire block in Text#handleFiller and it seems to work with some tweaks.

Needs investigation

[asturur]

must be a recent regression of chrome, we should open a bug to them i suppose.

[asturur]

#8829
Seems it happens after chrome 111 onward

[carior]

Has it been solved?

[carior]

、
text.set('fill', new fabric.Pattern({ source: img, repeat: 'repeat', patternTransform: [1, 0, 0, 1, 0, 0] }));
No correctly drawn text，And show blank。

[sk65cool]

Hi,
Any solution for fill Text with patterns in chrome, yet?