Rank 1
Hello! We've noticed that only in KendoReact components (not reproducible with our custom or 3rd party components) sometimes completely randomly these weird "â€<" characters show up. For example:
- Dropdowns:
- Dialogs:
This issue seems very similar to: https://www.telerik.com/forums/strange-characters-in-different-kendo-objects but while that's for Angular we are using React.
Some information:
- We are using an ARM64 version of Ubuntu with the Chromium browser
- We've checked and all data is stored as UTF-8 in our database (with the correct DB settings)
- We've checked and all response & request headers related to UTF-8 are set for all of our endpoint
- The issues does not reproduce on X86 Windows based systems or while working locally (from localhost)
- We are using KendoReact version 9.3.1 with the Fluent Theme version 10.1.0
- This issue pops up completely randomly and cannot be reproduced constantly
- We've investigated and checked and our fonts are loaded correctly. We also have some fallbacks in place, in case our font fails. All of them support UTF-8 characters
- We are NOT using Kendo's localisation feature
- Checking the Network requests from the DevTools reveals that the data comes correctly but is displayed incorrectly somehow
We ran out of ideas and this issue is really critical for our environment. Could you advise what should we investigate? As this issue only happens with Kendo components, to us it seems pretty clear that the issue lies there somewhere.
Thank you!
This issue may occur if the font file fails to load properly for some reason. Typically, if you're opening the project on the same machine, the font file should already be cached.
However, if the problem continues, I recommend checking the browser’s console and network tab to see if the request for the WebComponentsIcons file fails at the time the issue occurs. Additionally, if you're currently loading the themes from a CDN, consider switching to local theme files to see if that resolves the problem:
Regards,
Filip
Hello Filip,
Thank you for taking the time to investigate this issue for me.
We are using custom fonts that are fetched from the same machine that runs the static web server. We also have fallbacks in case the fonts fail to load. But we can see the font apply correctly when this issue occurs.
When testing locally we always disable the browser's cache, especially to avoid issues like these, so I don't think that could be an issue. Also we have a development environment and the issue is not present there.
I've just checked and I cannot see any WebComponentsIcons requests being made from the devtools. We use custom svg icons and not font based icons.
We do use themes, more specifically the fluent theme, but we do not use any CDN for it, we directly "compile" it together with the solution. We also don't use any CDNs in our solution.
Thank you for the provided clarification. If possible, can you please isolate the undesired behavior in a runnable project? This will enable me to debug it locally and find the root-cause.
Regards,
Filip