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
Related
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.
I recently updated to Safari 7.0.2 (comes along with Maverick) and noticed a significant change on colors on my webpage. Namely the grey tones are darker and the css generated gradients show ugly steps, no longer fluid. Colors with Chrome under Maverick are still the same, no longer comparable to Safari. So I have to define different CSS colors to have the same results on Chrome and Safari? Weird. Never had this problem of different colors not even among other browsers (Firefox and so on, all the same)
www.stefanseifert.com
Maybe I’d have to add that I am using a custom monitor color profile.
Edit:
Thanks Unmut for your quick answer and your interest! What you showed me is interesting, in fact I didn’t know about this. Leaned something. Unfortunately, yet, this is not the case here. First because it isn’t about the colors within images but about the ones defined by css. (which is very very bad in my eyes)
I will try to attach 3 pics to explain. Second, yes, the difference is not big but it is significant enough for me as a designer. On the bigger pic you see 3 screenshots. The grey color as I defined it in css should be #787878. All browsers display it correctly (as also Safari did before Maverick!) Safaris grey now is deeper.
color_difference http://www.stefanseifert.com/Color_difference.png.
And what’s even worse are the gradients created in css (plus transparency) that show very well on all browsers (as in the first pic), but with slightly visible scales in Safari (also NOT so with Safari before Maverick) as in the last pic.
gradient_1 http://www.stefanseifert.com/gradient_Chrome_andOthers.png.
gradient_2 http://www.stefanseifert.com/gradient_Safari_7.0.2.png.
I retain this a serious problem. All around I read about Mavericks improvement of color, for me this is a great disadvantage for it doesn’t give reliable # css colors. Someone with help?
I figured one problem out, at least. I work with a customized own color profile on my iMac. And it seems that this creates the confusion. If I turn to the standard iMac profile all browsers look the same and the screenshots give the right hex color values. Yet, this is what I don’t want to do. So no real solution here for me. Somewhere I read that it depends on srgb that are not used by Safari 7, don’t know if this is true but it maybe a useful hint for someone.
For what regards the less fluid css gradients, another problem that remains. New Safari is bad at this! Much more preferable Google Chrome now, but the sad thing is that one can’t force users to use Chrome instead of Safari. All standard Mac users will use Safari I am afraid.
Second I observed performance problems in Safari with complex css transitions. It helped a little force elements around to hardware acceleration or introduce back face visibility hidden all over the place, but this is not very satisfying and good part of the lousy performance remains even with it. I thought Apple wanted to better performance of its browser, but for me it seems worse now. Everything was just fine with Safari 6 and css transitions instead. A petty.
I think it has got a problem about Color Rendering & Color Profiles.
Why don't you check these links:
http://css-tricks.com/color-rendering-difference-firefox-vs-safari/
http://www.color.org/version4html.xalter
http://news.cnet.com/Safari-ushers-in-better-browser-colors/2100-1012_3-6191815.html
Note: I checked it Mac OSX Mountain Lion, Safari 6.03 and i didn't see big difference.
I found this:
Apple Safari Safari supports both v2 and v4 ICC profiles.
Unfortunately, it has no control over color on other page elements.
Tagged images look right, but every other page element has
over-saturated colors on a wide gamut LCD.
on
http://cameratico.com/guides/web-browser-color-management-guide/
Seems that Safari forces the webpage to use the full range of Monitor LCD while others like Chrome don’t. So if you changed your monitor color profile it is ignored by Safari or at least differently managed.
If you could influence on the way Safari interprets images color by tagging the images this is not possible with the rest of the elements as divs defined by CSS values.
I've noticed some strange behavior with both Chrome and Safari on my Mac:
Mountain Lion
Safari 6.0 (8536.25)
Chrome 21.0.1180.89
The page is a simple fixed div with some text in it, I added a second div that does a simple CSS translation over 5 seconds so you can easily see the difference. My web app is using CSS transitions to show and hide portions, and while it was doing this large portions of the screen seemed to shift.
I've placed example code and a .mov file out on a server so hopefully you will see the same issue:
http://physicaltable.com/index.html and http://physicaltable.com/CSS_JIGGLE_TEST_2.mov
The strange bolding doesn't occur in Chrome on Windows 7, nor does it happen on the iPad 2 (v5.1.1)
Has anyone else seen this type of issue?
I realize this isn't much of an answer, but I've found that it's mostly because of the rendering of the elements. If the element needs to use hardware or any other type of graphics rendering, it basically takes an image of the text, adjusts it, then rerenders the text (if it can).
The "taking a picture" is where the boldness is lost, since the browser/display/something is adding the flair that makes the text look good. Of course it doesn't look that good, but that's just me.
I've noticed with different colors other than all white/black, it can behave differently. I'm hoping things will get smoothed out as browsers and rendering advances.
I found solution for this bug
its enough simply force your browser to rerender that at moment move is stopped
E.g.
$("your_element_selector").css("color", "color");
where color can be even same color as your text has
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 :/
I've been playing with CSS3 transforms- rotations- and embedded fonts.
Some fonts completely disappear in Chrome when I apply a rotation.
Does anyone know why chrome blows this up?
What makes a font susceptible to this behavior?
Screenshot
So maybe y'all don't think I'm crazy- The text only shows up (kind of) after I try selecting it.
You weren't including the font correctly, try it like this:
http://jsfiddle.net/DFmtJ/1/
(tested on windows XP, Chrome 11.0.696.68 and 13.0.782.220)
------Edit--------
Cried wolf, the font that was being loaded was another one :/, though it is working for me on Chrome as in your first demo.