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."
Related
I'm using rgba colors, but after switching to HEX the problem still persists. I never had this issue a few weeks ago, and just noticed it. All opacities on rgba colors are set to 1 (100%), so they should appear. I assume it's a new chrome bug?
The left screenshot is Safari where it works and the right is Chrome.
safari vs chrome link
Same to me. I found a fix! Aparently there is a bug with webkit with the backface of a div element. This code will help
-webkit-backface-visibility: hidden;
You can found more info in w3schools.com -> here
Chrome appears to have some rendering bugs. Especially after GPU Driver Updates or Chrome Updates. A friend of mine had them for months.
You could try tuo update your drivers but theres no guarantee it helps.
Same happens to me. I tried to download Chrome beta. The weird rectangles do not appear there but the background color still does not act as it is supposed to. You can take a look at my page - the blue background color magically changes itself as soon as the whole landing page disappears.
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 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.
I just downloaded the IE8 full release so I could test a site I just created.
[Example Deleted]
Focus on the left sidebar background image. It is suppose to be a 1x1 semi-transparent .png image that repeats. IE8 renders it as a gradient!!! It get's even wonkier when you try to scroll your window or mouse-over the sidebar.
I had already tested this site in the normal browsers (IE7, Firefox, and Chrome). It looks exactly as I designed it in these. IE8 is FUBARed though. I tried to set IE8 to "IE7" mode but it still looks crappy. IE 8 in IE7 mode obviously isn't rendering the same way as the real IE7. Not even the "IE7 meta tag" works.
Has anyone else had problems like this? I thought IE8 was supposed to be a an improvement, not a step backwards.
P.S. Please excuse the crappy markup on this page. I used IE's "save entire page" feature.
It may be a rendering error in IE8, or perhaps it's some function to smooth the edges of repeated images that gives you an unexpected result. Either way it's not very surprising that you get problems using such a small image. Do you realize that the browser has to draw the image 190152 times to render the page?
I am using a 10x10 semi transparent png as background for a div in a page, and it renders just fine in IE8.
I fixed the bug and it isn't the gamma issue that is mentioned in that other post. My issue was being caused by the fact that the image is 1x1 pixel in size. I just changed it to 1x2 and it fixed the problem. Weird
[edit] Just saw Guffa's post after i asked this. See his for answer.
I had a similar issue with a site I'm building. The issue only occurred on 50% of the machines with ie8 it was tested on, I was building it for an IT firm so had access to lots of computers. We were able to "fix" the problem by toggling Hardware Acceleration on the problem machines, not that thats really a fix at all.
Thanks for the help on this issue -- what a weird bug.
I was also experiencing the issue on 50% of the computers running IE8 (had access to quite a few machines). When I had a 1x1px semi-transparent png set as a background image on a div with CSS, IE would render this as a funky vertical, transparent gradient.
Changing the source image to a 5x5px png of the same opacity fixed the bug... go IE!
The problem was my original png was
1×1, and for whatever reason IE8 was
not liking trying to tile that and
handle the alpha transparency at the
same time. When I accidentally saved
that image with a much larger copy I
had on my clipboard, 100×100, it ended
up fixing whatever problem Internet
Explorer was having with processing
the png’s transparency.
Source