-
1. Re: Blurred text when views in Chrome. A -webkit-font-smoothing issue?
joel_pau Dec 1, 2014 5:31 AM (in response to Shaun@Twist)Hi,
Blogs or forums introduce many tips.
You can begin with:
sym.$("yourElement").css({
"-webkit-font-smoothing": "antialiased",
"-moz-osx-font-smoothing": "grayscale"});
-
2. Re: Blurred text when views in Chrome. A -webkit-font-smoothing issue?
Shaun@Twist Dec 1, 2014 6:02 AM (in response to joel_pau)HI joel_pau,
Thanks for your responce, can you tell me where I need to put this code that you've provided?
I'm using Edge Animate, do I add the code in EA or manually into one of the JS files, or the HTML?
Shaun
-
6. Re: Blurred text when views in Chrome. A -webkit-font-smoothing issue?
joel_pau Dec 1, 2014 10:22 AM (in response to Shaun@Twist)post #4: You have a syntax error. See: fonts.zip - Box
-
7. Re: Blurred text when views in Chrome. A -webkit-font-smoothing issue?
joel_pau Dec 1, 2014 10:22 AM (in response to Shaun@Twist)post #5: Can send me a sample? or a link to your sample?
-
8. Re: Blurred text when views in Chrome. A -webkit-font-smoothing issue?
Shaun@Twist Dec 1, 2014 10:37 AM (in response to joel_pau)Hi I downloaded and extracted your zip file. I previewed index.html in Chrome and IE11 and saw no difference (image attached), each of the three are rendered the same yet your screen grab with notes (webkitReturn.jpg) I can see the differences I’d expect to see...
This is puzzling, I’ll share my documents in a second. BTW I was aware of my “non” “none” error and fixed it, but same result.
-
9. Re: Blurred text when views in Chrome. A -webkit-font-smoothing issue?
Shaun@Twist Dec 1, 2014 10:44 AM (in response to Shaun@Twist)I've uploaded my text project into a zip file here: Dropbox - ShareFolder
-
10. Re: Blurred text when views in Chrome. A -webkit-font-smoothing issue?
Shaun@Twist Dec 1, 2014 11:08 AM (in response to Shaun@Twist)web kit.zip = my attempt to get the webkit anti aliasing stylings to work
Text fix.zip = my actual project (sensitive data removed) showing the strange fuzzy text (when vied in the Chrome web browser).Thanks.
-
11. Re: Re: Blurred text when views in Chrome. A -webkit-font-smoothing issue?
joel_pau Dec 1, 2014 12:02 PM (in response to Shaun@Twist)I downloaded your file and i will look at your sample tomorrow (folder name: "Text fix").
Some remarks:
1) What is it a webkit browser? Chrome, Opera, Safari.
Therefore Internet Explorer and Firefox aren't.
2) What is it "webkit"? It's a prefix. See: CSS3 Reference
The Firefox prefix: "-moz-". The Internet Explorer prefix: "-ms".
3) If you write (script) the right code and if you open the right browser (Chrome, Opera, Safari): it runs fine.
So, you have to change an error: another syntax error.
Folder name: "webkit", filename: "webkit".
You wrote: sym.$("TextNon").css({"-webkit-font-smoothing": "none"});
and it was: sym.$("TextNone").css({"-webkit-font-smoothing": "none"});
4) post #8: your IE picture is correct. Because the prefix webkit has no effect on IE.
5) I explain:
sym.$("yourElement").css({
"-webkit-font-smoothing": "antialiased", // effect on Chrome, Opera and Safari. No effect on IE and Firefox.
"-moz-osx-font-smoothing": "grayscale" // Firefox browser on Apple devices (except iOS).});
-
13. Re: Re: Blurred text when views in Chrome. A -webkit-font-smoothing issue?
Shaun@Twist Dec 2, 2014 1:52 AM (in response to Shaun@Twist)Also I noticed that when I turned off Responsive Scaling on the main stage of my project, the text (viewed in Chrome) was sharp like it is in IE. This is so frustrating, the -webkit-font-smoothing : none should work, but doesn't. What am I doing wrong?
-
14. Re: Re: Re: Blurred text when views in Chrome. A -webkit-font-smoothing issue?
joel_pau Dec 2, 2014 6:10 AM (in response to Shaun@Twist)1) post #12: your tests are corrects.
Here is Chrome with Microsoft device (top) and Apple device (down).
2) "I noticed that when I turned off Responsive Scaling on the main stage of my project, the text (viewed in Chrome) was sharp like it is in IE."
Yes, setting a percentage was an effective tip.
3) Finding: Post #1 is ineffective on Chrome for Windows. It only affects Apple devices.
I am testing some tips. I will add another post. So, wait and see.

















