I have create a PNG arrow graphic for use in a client's website. It render's perfectly everywhere except in IE 6,7,8 and 9. I have attached an image for you to examine and have already tried 2 different IE png fix scripts - one jquery and one a css behaviour .htc file.
Please assist me.
Thanks
Jamie
Image: http://i51.tinypic.com/2w1uzqe.jpg
Sorry to say that but for 5 years i've been looking for 100% working hack for png transparency bug in IE's with no result. There are many of them and usually each of them doesn't work here and there.
Try using transparent gif instead or crop arrow image with background along. It will take few more bytes of White color so won't damage your performance that much.
The bug that IE PNG Fix scripts are designed to fix is only a problem for IE6 and lower.. hmm.. possibly IE7? I forget. In any case, IE8 fixed the issue, and IE9 definitely shouldn't have it. These IE versions may still have plenty of bugs, but the old well known PNG background issue isn't one of them.
My guess is that there may be a corruption in the PNG file itself.
My suggestion is to try loading the PNG image into Photoshop (or your favourite graphics app), and re-save it. That may be all you need to do to solve the issue.
Failing that, would you be able to give us a link to the actual PNG file, so we can have a look as well?
Related
I'm converting all the images on my website to interlaced, but i found a possible issue, under OSX 10.10.5 and Firefox 38.0.5
Interlaced PNGs that are bigger than the browser window (and so they are resized in automatic by the browser) display in a very low quality, like if they are displayed in one of the intermediate layers, and not in the final version. Zooming the image to 100% removes the problem, and changing the browser windows size removes the problem as well.
Here is an example of an interlaced image:
https://trac.ffmpeg.org/attachment/ticket/161/Test_24bpp_interlaced_paeth.png
(you have to download it and open with firefox in a small window, so that the image zooms out)
This issue is happening in the 80% of the times I try the same operation.
The issue doesn't appear, instead, in jpeg progressive images.
Could you please confirm me the issue? I think it's very strange that I can't find any other people having my same problem.
I have a bespoke font for a client which I converted into a webfont. All went fine, works on my mac and others across Firefox, Safari and Chrome, however when viewed using Windows, the font becomes extremely distorted and unreadable, on any browser.
Does anyone know what could be causing this? Could it be an issue within the original font or is there a code trick I can use to fix this?
It's a hinting problem. Microsoft’s rasteriser tries to align characters to whole pixel grid.
Read: https://www.typotheque.com/articles/hinting
I'm currently using jQuery UI 1.9.2 and want to upgrade to 1.10.0. I have a custom theme and used the URL at the top of my CSS file to visit the ThemeRoller.
My colors didn't look right, so I went through and double checked all my settings. I was using 3-digit hex colors and tried changing them to 6 digits, but that didn't help anything. I cleared my cache and restarted my computer. No change.
I started digging a little deeper. I opened the image in PSP, the colors are fine. They also appear fine in Safari and Chrome. They look fine in Firefox 12 on the laptop, but not in Firefox 12 on the PC (Win XP on both machines).
I thought maybe there was an add-on messing with my colors. But I opened the 1.9.2 image file in Firefox and it looks correct.
1.9.2 -> 1.10.0 ->
I just added the two images to this post from my own computer. I'm looking at the preview with the images side-by-side. The one on the left (1.9.2) is the one I want. The one on the right (1.10.0) looks much more purple on my screen. The background color is supposed to be #0066cc. I used a color picker to view the color displayed by Firefox. The 1.10.0 version has a background color of #4756c7. I see the same problem with all the new images, even the flat ones.
I looked at the two files with ExamDiff Pro and they are very different. Plus, all the new images are larger than the old images (more than twice as many bytes).
Luckily, I only copied over the CSS file and the new animated-overlay.gif, so I am just going to keep using the old images. But I want to understand what's going on.
So what did jQuery UI do differently when generating their images? And why did they change them? And why does Firefox 12 on my computer show them with different colors?
Hard to say exactly without seeing the actual files, but it sounds like browser variations in the way that ICC color profiles are being handled. More details on FireFox specifically over here. But it might not be FireFox being the problem & more connected to whatever your main development browser is & how it handles ICC profiles as well.
Like the FireFox article implies, the feature is fairly old in many browsers but what I have noticed is many modern browsers nowadays are actually paying attention to ICC profiles as a default, whereas before that feature was disabled by default.
Which is all to say I would see how these images look if you strip out all EXIF metadata using a tool like exiftool. Without an embedded ICC color profile, the images should render similarly between all browsers.
And to strip out all metadata with exiftool you would just run a command like this; assuming your file is named test.jpg:
exiftool -all= test.jpg
You will end up with a backup file tagged as test.jpg_original that still has EXIF data embedded and a cleaned test.jpg that now is 100% stripped of EXIF data.
I have created a gif in photoshop. It has two frames displayed for 4 seconds each and is on a loop forever.
For some reason the image freezes on the second frame and does not continue to load in some browsers (The exact information about browsers and / or versions is unclear at the moment but it has happened in the latest version of chrome).
The image is embedded in the code in the standard way, no javascript is used and nothing is changing the element.
Does anyone have any idea what could be causing this? Everything I have searched for so far seems to result in people saying "Oh, I forgot to put make the gif loop forever" instead of any real reasons for causing this problem.
Thank you for your help!
Edit: Sorry I didn't think about putting an image in the original post. He is an example of one advert which doesn't seem to work.
Because the current image displays correctly in everything I've tryed so far, try to create image in different application.
Some applications you may try:
GIMP - tutorial
Some freeware crap.
I'd vote for GIMP. Its complicated, but its free and it has wide user suport.
If you still fail...
Now its time to check the enviroment. First, open the image on different machine. Maybe there is something wrong with your browser instalation. In this case, reinstall.
Try to upload on different server. Maybe your browser does not correctly decompress deflated data or has other communication issues.
Me and my colleague are facing a weird anomaly of one little graphic being purple in his computer and blue in mine. The file itself seems to okay and we have re-created it from PSD several times.
You would say that, the problem is local in his computer. However, our computers are fairly similar and there has never been this issue before. Also, if he checks the source-file its ok, meaning blue. His computer had a fresh install of Win7 and clean photoshop.
What could be the problem and what can we try to solve it?
More information:
He is using FF5. The image is in PNG format. There are no js related scripts, to alter any of the images.
Direct link
Live example
(In the image we are talking about the little arrow, that is purple in one image)
From my point of view:
From his point of view:
NOTE: I personally think the issue is local in his computer. But he of course doesn't accept this answer. So if it is local, then somebody could explain, how does it happen.
Your issue could be due to gamma correction and color correction for PNGs. Ran into a similar issue myself with PNGs a couple weeks ago. A PNG would display with the correct colors in one browser, and with different colors in another browser on the same computer.
See this stackoverflow question as well for more info: Firefox 3.5 color correction hack?
EDIT
I definitely think this is a color correction issue, take a look at the images in two different browsers (chrome 13 and firefox5) on my machine. The image in Firefox is displaying with different colors than the one in Chrome.
Check the color settings on your monitors. If you're using different color temperature (Kelvin) settings, or your RGB settings are non-default and different, or if your monitors are different makes/vintages, you might see things display in "different" colors.