I have an image with a background color and I'm putting that in a div with the same background color. For some reason I cant save this image as a PNG and have the image bg color show the same as the bg color in the div across all browsers on all operating systems.
At first it looked fine on Windows/Mac in every browser except IE. So I tried using tweakPNG to remove the color profile and gamma properties and that seemed to fix for IE but now I have the issue in Firefox on Linux for some reason?
Any ideas/insight? Thanks
You didn't specify which version(s) of IE you had problems with, but older versions of IE are known to have bugs and missing features with PNGs.
In particular IE6 doesn't support PNG transparency at all, and IE7 has bugs with it.
There are a number of Javascript-based hacks available to fix this issue in IE. Here's a link to one of them: http://www.twinhelix.com/css/iepngfix/ - but there are a number of others that do the same job.
If you're having a problem with Firefox after running the graphic through tweakPNG, my guess would be that tweakPNG has corrupted the graphic slightly.
My suggestion would be to try going back to the original version of the graphic, and try out the hack I linked above in IE.
You must remove the GAMA filter on your PNG.
This soft make it quickly and easily.
Import your PNG
Right clic on gAMA
Delete
Save
Tutorial here
Related
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.
When checking my website a couple of days ago, everything was OK, but having looked at it this morning in Chrome, the background image and colour applied to the body have just disappeared completely. Safari is also looking pretty bad with the background colour visible and the background image on the body only visible behind other background images!
Things I've tried...
resizing the background image so that it's a lot smaller
removing the image and just having a background colour
viewing the site in incognito mode
Absolutely no difference in the outcome. I've cleared the cache and tried disabling caching but to no avail. Also, the file definitely exists. Not only can I see them being downloaded in the 'Network' tab in the Chrome developer tools, you can see it here: http://charanj.it/assets/images/website-bg.jpg
You can also see the smaller version I tried http://charanj.it/assets/images/website-bg-small.jpg
Weirdly, resizing the browser window in Safari brings the background image in. Another odd thing is that another site I built using almost exactly the same background techniques shows the images just fine, see http://nikeplusphp.org
The CSS has been generated using LESSPHP but I'm sure this isn't the issue as it was working fine before and no changes have been made to the CSS in months.
I have Chrome v19.0.1084.46 m and Safari 5.1.2, Windows 7 but the issue also occurred on my MacBook with the Chrome 19.
Tiny bit more information: Issue happens in a locally run copy of the website too.
Although it seems to be a browser issue, the culprit was the following line of CSS at the top of the stylesheet:
* {
-webkit-backface-visibility: hidden;
}
I tried moving it elsewhere but I still get the same issue. Applying to individual elements seems to work, but as I no longer use any 3D transitions on the site, there's no need for it and removing it has solved the problem.
In my chrome(20.0.1132.11 dev-m) everything is ok.
The problem may be in the extensions (try to disable all) or the most chrome (try to reinstall it)
Update: Same bug on SO and in accordance with the answers to that question, this bug is known and not yet fixed
I checked your website, and the background works, try to clear all navigation data (ctrl+shift+delete select all check-boxes and any time of).
Recently i have come up with problem with background image like a ipad theme that contain a video, problem is that size of video may change, so i thought of trying border- image properties of CSS3. the major properties of css3 could be made cross browser compatible by using some technique or other. currently i use css PIE. but it doesn't support image border property in its recent version, IS there any way round. Just need to fix it. IE is really a pain :(
I thought of using some "Ninja in your browser" script it didn't worked.
Nope. There's currently no way to get border-image into all versions of Internet Explorer. PIE is working on it for IE9, from what I've found, but ran into some breaking problems (see more info in this duplicate question).
From the sound of it, your best bet is probably to allow IE to gracefully degrade by using a simple border or background.
I'm creating a draggable/resizable menu with all the neccesary links to control the website, a CMS-bar kind of. I'm using some png's to create the background, set with some transparency.
It works great in FF, but in IE my png's get transformed after I drag my menu around:
Screenshots:
http://img.photobucket.com/albums/v739/Alienna/falcon/drag.png
Also, that big empty space? That's a log-out button(div with background-image and a-element), of wich only the :hover status seems to work, and only before dragging ...
Any fixes for this? I thought IE's png problems were gone after IE6(tested this ie IE7/8) ...
I'm not 100% sure, but I assume this is the old "PNGs with alpha transparency in DIVs with alpha transparency" bug that is present in all IEs including 8. See here for more info.
In short, IE has difficulties with alpha transparencies in PNGs when those are in containers that themselves have an opacity different from 1. When you drag the element, its opacity changes, and the bug comes into play.
Convert your draggable image to 8 bit, It works for me..
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