I have an area of a website that has a few broken images; however it is only in a few different situations.
Where it works
Windows 7 (all 64 bit) - Chrome, Firefox, IE7, IE8, IE9
Windows XP - Firefox, Chrome
Where it doesn't work
Windows XP - IE8, IE7
If I look in the source on the Windows XP/IE combinations, the generated source looks fine. However, if I paste the URL of the image into the address bar, sure enough it can't find it despite it being there. If I copy and paste the same URL into one of the other browsers, it finds it just fine. Cross browser quirks is something we are all familiar with, but an image not being found but only in certain hardware/software combos is certainly a new one for me.
I know this question is 3 years old, and the images are no longer there, but anyone investigating this problem may have some luck with this answer:
Some images won't display in IE7 or IE8
Short version: the images are CMYK compressed rather than RGB; apparently it can be fixed by opening in irfanview and re-saving it, or something similar in photoshop.
Related
I ran into a problem with font rendering on Windows.
I'm used to a little difference in rendering between Mac and Windows, but this just made my mouth fall open. I tested the site thoroughly on Mac and I'm positive it looks just fine in Chrome, Firefox and Safari.
It looks like this on Mac browsers:
On Windows, it looks completely messed up in any browser (I tested Chrome, Firefox and IE):
I know Mac has Iowan Old Style installed by default, so I tried forcing the Mac browsers to use the webfont I generated using FontSquirrel, but that doesn't reproduce the problem on Mac.
Both browsers seem to load the same font (namely the woff version) correctly. Does anybody have any idea what this could be?
I can't post the link to the website because I don't have enough reputation, please look at the screenshots for the URL..
Thanks guys!
After some more research I found out the original (ttf) font worked perfectly fine on Windows, so it had to be FontSquirrel that caused the problems. I tried out 8 different types of settings on FontSquirrel and kept having the same issues.
After a while I decided to try a different generator and I came across Fontie: https://fontie.flowyapps.com/home
This actually solved the problem for me!
Generally speaking my font works fine but I'm seeing on odd occasions such as switching back to the browser from another application and sometimes when switching back from another tabs that my font seems to have unloaded and is using the fallback font.
I'm struggling to consistently replicate this and when I have seen it there are no errors.
I have also seen this happen in Chrome and Firefox on windows and osx and at a bit of a loss as to how this can be happening.
I haven't seen this issue in Firefox personally, but it is a known bug in Chrome.
https://code.google.com/p/chromium/issues/detail?id=336170
This is a really weird problem that appeared in the recent version of Chrome.
I have a huge app that loads hundreds of stylesheets (in dev mode). When the page loads, obviously all styles are applied but background images are missing!
If I just do nothing and wait, suddenly the images start loading randomly...
Using dev tools I checked the network tab to see if the images are requested.. but no, just a few of them appear in contrast to the previous version of Chrome.
Does anyone know if any kind of optimization has been added in Chrome that makes images load lazily? Obviously that implementation is buggy and does not consider a page with a lot of stylesheets!
This problem does not affect the app in production, where all the stylesheets are packed and reduced to just ~10.
Tested on Linux and Windows 7
I had a similar problem with our web site on Chrome 27.0.1453.93 and 27.0.1453.94. It turns out that Chrome seemed to think that all of our .gif images were corrupt. They wouldn't render in Chrome but they would render fine in IE, Firefox, and older Chrome versions.
I'm not sure what the underlying issue was, but I opened the images in Photoshop and re-saved them and now it works fine.
I have a problem with 3D-Transforms on Images.
For example:
transform: rotateY(60deg);
It works fine everywhere except Firefox on Windows XP. The image is displayed jagged there (no anti-aliasing?). It looks nice with Safari, Chrome and with Firefox on Windows 7 and Mac OS X. Also tested different versions of Firefox with no other results.
I couldn't find any description or solution of the same problem. Some write that giving a (transparent) border/outline helps to improve the edges but it doesn't help inside the image.
I made a fiddle here: http://jsfiddle.net/8Tx6X/4/
Here is how it looks in Firefox 16.0.1 on Windows 7 (and other browsers) compared to Firefox 16.0.1 on Windows XP:
http://i.stack.imgur.com/NePyd.png
Anyone experienced the same behaviour?
Could it be a problem with hardware/software-rendering?
(I tested on XP with a virtual machine and an old laptop)
I would love to find a hack or at least a way to detect if it is displayed correctly.
Some more investigation brought me a little bit further. It's not a problem with Windows XP as I thought first. The problem occurs if Firefox doesn't use hardware acceleration. When I turn that off (in Options -> Advanced -> General -> Use hardware acceleration when available), it looks jagged on Windows 7 too. I also tested on another computer with WinXP where the image looks fine. You can see if Firefox is using hardware acceleration when you type in "about:support" and look for "WebGL Renderer" and "GPU Accelerated Windows".
So I guess Firefox's software renderer can't do any better right now.
What I do now is detect if WebGL is activated and therefore hardware acceleration is available. This is the code I use (it's from an old version of Modernizr):
try {
var canvas = document.createElement('canvas'),ret;
ret = !!(window.WebGLRenderingContext && (canvas.getContext('experimental-webgl') || canvas.getContext('webgl')));
canvas = undefined;
} catch (e){
ret = false;
}
return ret;
If the test passes I serve CSS-3D-Transforms. Otherwise the user sees a flash fallback.
I am experiencing the same issue, with Firefox on Windows 7. As you say the edges can be fixed but the content, (I have not used an image, but absolutely positioned HTML elements) looks terrible, but in Chrome and Safari they are fine.
I have a very wierd problem and I dont know where to begin to fix it. I have tried my website on 8 computers using IE9 and for 2 of them the page doesnt show the correctly. I found out that when I take out the dropshadowextender it looks ok. So what I did is first try to go in cleared out all cookies, etc.. and then went into advanced settings to compare the ones that were working to the ones that were not, but that didnt work. I tried the site on all machines using FireFox on all computers and they work fine. My problem is what could it be causing those 2 computers to not show up correctly. I could see if it showed up wrong when I ran the site on all computers.
CSS3 Pie is a .htc file that, when placed on your server, provides extra code for IE so it can render many CSS3 styles on IE9, 8 and 7 properly.
Works well. Worth checking out.