The following graphic illustrates an issue with png transparency in Internet Explorer, that I am unable to resolve.
Transparancy not so transparent in Redmond. http://img101.imageshack.us/img101/1917/problemkl.jpg
The transparent graphic is the following image.
http://img411.imageshack.us/img411/7959/transparentfade.png
I realize that it might be invisible on white background, so here's the inverse of the same image to aid understanding.
http://img338.imageshack.us/img338/7121/transparentfadeinverse.png
The idea is to provide a soft lead-out which works nicely on Chrome/FF/Safari/Whathaveyou, but obviously one can't have nice things and IE wants to stand out. I would very much appreciate any help on this matter.
EDIT: I've read someplace that combining opacity effects and transparent pngs is not well supported in Internet Explorer. By removing the opacity effect and making suitable changes to my png graphic, I was able to reproduce same animation across all major browsers.
You cannot safely mix legacy DirectX Opacity Filters and transparent-PNGs. In IE9, you can use native CSS3 Opacity safely with PNGs without the problem you encountered.
Related
I'm working on a new personal website. For the homepage header I made a soothing waves animation using the colors of my new theme.
Problem: this animation seems to be quite heavy and is jagged/stuttery on lower-end devices like mid-range smartphones and cheap laptops. Not a desirable effect for a homepage or any website for that matter.
Website
The animations are done by animation background-position on the wave elements and subtle movements with css transform animations (translate, rotate).
What I've tried so far:
turning the animation into a lightweight video. Problem: color
reproduction across browsers is a mess. The green on the bottom and
the blue on top needs to match up with the background of the page,
which is impossible to do across all major browsers (I tried using
css filters to correct the differences in color interpretation but
unfortunately this also isn't satisfactory).
Using the will-change css property on the animating elements. This doesn't make a noticible difference but I still leave them in to be sure.
Using a javascript animation library to do the heavy animation lifting, but this produces a similarly heavy result.
Rendering the video to a html5 canvas. This still produces the same color misinterpretation.
Contemplating life and why the world in 2020 is still like this that there's no regulation on color reproduction between browsers and devices. This obviously did not produce a useable result.
Conclusion:
I'm open to any input on making the animations be less recource-intensive, I'd prefer keeping the live-rendering version like it is now, but if there's a solution to the color interpretation issue in html5 I'll gladly switch to using that method as it tends to be the easiest on end-user resources.
I have read in many places that this was an issue with Safari. Basically, the problem is, I want my table to be completely transparent except for the writing. I have been playing around with the idea of somehow setting opacity on the background only. I'm not sure where to start though as I am still learning HTML and CSS.
How can I make the table blend in completely with everything else? Is this possible yet?
I have an image that is sitting on top of a background. In Firefox and Chrome it looks fine as per below:
But in Internet Explorer (any version), it looks like the image background is a different shade than the background (I have put a red box to highlight where the image ends and the background begins, but it's pretty obvious).
How could it be that, given the same image and the same HTML background color, one browser looks fine but in Internet Explorer it looks like the colors are off as the background color of the image is a shade lighter than the HTML background?
The full website is here if that helps.
I think you have different image formats, and Internet Explorer got some image rendering problems. Try to put both of the images background and logo (back-page1.png, logo5.gif) in the same format either GIF or PNG (I prefer PNG) and it should do the trick!
Good luck :)
UPDATE:
So what is this render issue?
As tenfour said in comment, "assuming that the RGB color is really the same on both images, the underlying problem is that Photoshop saves gamma information in the PNG which causes Internet Explorer to render a different color than desired".
I think you need to remove the gamma information in the PNG. See http://morris-photographics.com/photoshop/articles/png-gamma.html for an explanation of this problem. I use http://www.choppng.com/ to remove this section from the PNG.
I have a website where the background has a light gradient (light gray from top to white on the bottom). When I place an image with a transparent background on the website, the background of the image picks the top color of the gradient. So instead of the image's background appearing to be a gradient as well and blending in with the site, the image's background color is just light gray.
I'm not sure if this is the way it's suppose to be (due to the way transparency works on websites). But I was wondering if anyone could provide a workaround
First of all welcome to StackOverflow :)
It depends. First of all, your website will be rendered differently on different browsers, and that's of vital importance to you, because unless you test it on different browsers, you can't be sure what some users will see.
If you've seen a partially transparent PNG that instead of transparency shows a grey background, chances are you're using Internet Explorer 6, a very old browser that you really shouldn't use. It's the one with the blue E, that E stands for Evil. Run.
On a more serious note, having a link to check would help, or a screenshot, because it's hard to tell just by guessing. PNGs should render fine against any background.
On this test page: http:// www.onebagoneearth.com/ Products-test , where it says "oboe love series", "oboe kind series", etc, when you hover over that text (which is a background-image) in IE7 and IE8(at least on Vista, and also with IETester), the image blurs (not just by being opaque though...that would be the normal hover effect). Why is that?
The same thing doesn't happen on this page with similar CSS: http:// www.onebagoneearth.com /Products . If it's the zoom:1 bit of CSS, I don't understand why it would do that on one page and not the other.
I see what you mean, but on my computer it doesn't blur, it gets a noisy outline of dark gray pixels instead.
It's because you are using a PNG image with an alpha channel, and are applying a filter to it. Internet Explorer doesn't handle this correctly and draws the semi transparent pixels against a solid background instead of the actual background.
When this happens and how it appears exactly may vary from computer to computer, and even on the same computer in different situations. That's why some people experience it and some don't.