I've got a serious problem on safari browsers with this website
http://daskommunikationsstudio.at/
the problem is that it seems the text is not shown correctly and since i don't own an apple
i've got no real experience with safari.
maybe someone can give me a hint.
thanks a lot
andy
Looks like a font rendering issue. Changed the font-family, eventually you can use different font for Safari.
Related
so I know this question has been asked here before, but applying the fixes there didn't work for me (changing force-color-profile to sRGB in chrome).
I have my personal website here, and I guess I never checked it on firefox, which is now my default browser, but in firefox it renders the background photo's bg as #1b1b1b but in chrome it renders as #151515.
How can I fix this? I was thinking I could just crop the background out of the image and recenter it to avoid the bg conflict altogether, but I'm also curious what exactly is going on.
As A Haworth and Azu pointed out, this issue is not consistent. I believe this is a Linux-only issue, and found the answer here.
If you're having the same issue and are on linux, as the accepted answer says:
"open about:config and rechange the gfx.color_management.mode from 2 to 0."
Got a quick query about some text on my slider on a website I'm making. It's been puzzling me because it only happens in Chrome, when the slide loads it will output the Title from wordpress. As the page loads it renders the font as how it should then a split second later it gets more font weight it seems.
I'm wondering what the issue is?
Just check any of the text on the slides in Chrome. Would be great to know why!
Thanks.
edit* added an image.
known issue in Chrome fixed in latest development builds.
It is a temporary workaround you can also try.
After a little bit of looking around I found that if I add
-webkit-font-smoothing: antialiased;
To my headings it seems to fix my issue. I will mark this as resolved. Thanks everyone.
I just started coding my own website, and since I love typographic web design I was trying to use a really big custom font for the logo. Unfortunately during my testing on Safari using a MacBook Pro with Retina displays I noticed that there were some artifacts in the font rendering :/ First I thought there was some mistake on my part, but then I discovered that it happens with any font if it is big enough...
This behavior is visible on websites like http://fittextjs.com where the outline of the title is not correctly rendered. For anyone without a retina display here's a screenshot of what I'm talking about http://cl.ly/JL0j
Odd enough this strange bug isn't present on Chrome, and since they're both Webkit based I thought that maybe the latter is using a CSS default that renders text correctly.
Any CSS guru that knows how to solve the situation before me filling a rdar :) ?
UPDATE: I should note that I already tried using -webkit-font-smoothing: antialiased; and it doesn't work :/
I filled a radar about it yesterday and got an answer today (never got a response so fast!).
Apple engineers are aware of it and consider it a serious bug, so I hope it'll get fixed soon. In the meantime there's no workaround available apart from using images :/
For some reason IE9 renders Arial font bolder than other browsers such as: IE7, IE8, Chrome, and Firefox. I have looked for the reason in the CSS but couldn't find anything wrong.
Another thing that happened is that I had word-spacing of 1 or 2 pixels in most of my website, but IE9 showed it too wide, so I made conditional css for it with normal word-spacing.
You can see the difference in the attached screenshot, and also find it in this temporary link:
http://pat.co.il/shirg/matanuziel.com/
Any ideas will be appreciated.
Thanks
The problem is the browser, not your site.
Internet Explorer 9 uses sub-pixel positioned ClearType to render text by using DirectWrite. This can cause rendering differences compared to other browsers and is expected behavior. It can cause text to blur slightly more, just as you're seeing.
As a side note, you should consider using TypeKit if you want to use non-standard fonts and have them render (resonably) well for all users. Note that there will still be minor rendering differences across browsers, probably on the same order of magnitude as what you're experiencing here.
And as Alan stated, using normalize.css is a good idea.
It might be worth looking at normalize.css. I don't know if it'll address your specific issues, but I've found that it's a nice starting point.
Ok, weirdest thing....
Working at home and opened html document in Firefox 3.6 and my link text is wrong colors and looks multi-colored.
Any ideas?
Looks fine in IE, Chrome, Opera and Firefox 3.6 on my work machine.
I mean the difference is shockingly bad.
In this graphic the numbers in parenthesis should be simple light gray (#999) and the link text should be blue (#034ea2). But as you can see its all gone odd, green and yellow and forget the hover states... I am using percentage sizes on the text via CSS - but that shouldn't do this, should it?
This machine does differ from my normal work machine, but I don't think it's a windows setting as the colors look fine in other browsers.
This seems like an old IE problem - so it's freakin me out that good ole FF is doing it to me.
Any ideas?
Windows Cleartype was the problem. Must have been reset on my home machine by any number of Windows updates I've had in the last week. Thanks Joshusman! Sometimes the simplest things are the hardest fixes to find.
Try turning off ClearType in Windows, in case this is some weird subpixel rendering problem.
What you probably need is CSS Pseudo Classes