-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Text fill render issue when gradient unit is percentage #8168
Comments
let me check if this happens on #8154 |
Didn't find the reason yet. But It seems text rendering is to blame |
@amirhossein92 I wonder if it's fabric or not |
on Safari what versions did you test? |
I tested on this: |
I meant fabric version 🙃 |
BTW if you want we just merged a major improvement to the test suite... npm test -- --dev -l and it will launch the browser with visual tests |
Oh sorry, 😄 the screenshot of test for safari is the latest fabric version (5.2.1) |
|
Do you mean by css? here is a sample for text gradient. it renders correctly in both chrome and safari, but if you change the |
bare html canvas |
I came across |
any progress? |
sorry i m a bit lage. |
I also reproduced that the gradientUnits set percentage of gradient fill is not shown。 |
This is definitely a Chrome issue, it renders fine in Firefox and Edge. Perhaps a Skia bug @carior You can try this code, it's a hack that works. It basically bypasses the pattern route `
` |
What about a PR/merge & release? It has been almost a year... |
pr merge of what? |
@iocoker hotfix above. Does that make sense? |
After setting the gradient on
![image](https://user-images.githubusercontent.com/26138275/185864422-deb3801e-f80b-4668-b92d-cabd5a92771b.png)
fill
property of the text, the element is not rendered correctly. I tried in Kitchensink and the Automated Visual Test, and in both of them gradient is not working if thegradientUnits
is set topercentage
.Version
5.2.1
Test Case
Information about environment
browser - chrome
Steps To Reproduce
sample of gradient object:
{ "type": "radial", "coords": { "x1": 1, "y1": 0.5, "x2": 1, "y2": 0.5, "r1": 0, "r2": 1 }, "colorStops": [ { "color": "red", "offset": 0 }, { "color": "blue", "offset": 1 } ], "offsetX": 0, "offsetY": 0, "gradientUnits": "percentage", }
The text was updated successfully, but these errors were encountered: