I have PNG-24 exported from Photoshop CS6 and it looks like this in Chrome.
You can notice white strokes around triangles.
Same PNG renders correctly in other browsers.
Rendering in firefox is like this.
I am having this exact same problem. Seems like when there is very little contrast, Chrome tries to "solve the problem".
After much gnashing of teeth, I found that adding:
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
to the problem element's css solved the problem.
Also, see this post: https://superuser.com/questions/530317/how-to-prevent-chrome-from-blurring-small-images-when-zoomed-in which deals with a similar problem.
Related
A button in Chrome vs Firefox:
the baseline in Firefox seems slightly higher for the text. Is there way to lower the text? Just adjusting the margins based on browser?
Chrome CSS:
Firefox CSS:
The fonts were different. Though they are the same in CSS, they weren't being loaded properly so one of the browsers was using a fallback while the other wasn't. To help debug this document.fonts.check is very useful.
Thanks Temani Afif for the pointer in the right direction.
Use normalize.css. Most differents between browser will gone https://necolas.github.io/normalize.css/
Browsers have different base settings. Probably FF default line-height smallest then chrome. Anyway, Nobody find this different in normal using ;)
I'm testing the blur effect -webkit-filter:blur(5px) which seems to work only with Chrome.
But I've found this:
http://vectorflower.com/preview/trans_banner/
I dont know how they do it, but works with Firefox and Internet Explorer.
Does anyone know how they do it?
I thought they were "cheating" with 2 images, but the console shows only 1 request per image.
The css filter specification is pretty new and is not supported yet in IE or Firefox.
http://caniuse.com/#feat=css-filters
The example you linked to uses the canvas to draw the blur effect directly.
In the photography portfolio linked below, clicking on individual images renders the photo at a max-height of 90% of the browser window. In Safari, Firefox, and Chrome. But IE9 seems to ignore this command entirely and the user must scroll to see any portrait oriented photo in its entirety.
I've googled workarounds, but haven't found any that apply to IE9. Mostly I found Javacript expressions in the stylesheet suggested as workarounds for IE6. Is there a less "expensive" workaround for IE9? Or is it no longer a problem (which is why I can't find anything) and I just have a browser setting wrong?
Here's an example of an image that renders properly in Chrome, Firefox, & Safari - but you have to scroll in IE9: http://russmoorephotography.com/#/portfolio/state-capitol-aisle-capitol-dome/
Edit: this actually doesn't work in Firefox either. Just Chrome & Safari.
I am very disappointed that my 3 hour template design is not cross-browser compatible. Why is this? well, because my header background color is not displaying correctly in IE:
I thought at first that the problem was created by a bad read of padding/margin or other metrics of Internet Explorer (but it was not, I checked and the metrics are perfectly fine)
The only problem is that IE somehow modifies the color of my header's background.
Note: This problem ONLY happens on Internet Explorer (I have tested on Chrome, FF, Opera and Safari)
Here is a screenshot:
I am not sure why, but here is the CSS:
#header{
background:#5BA2D9 url('./images/header_bg.png') repeat-x left bottom;
min-height:90px;
}
My question: does IE modifies the color of my images? Why? How can I avoid this?
I believe this is a result of color correction information in the PNG files.
Optimizing the PNG files should fix it.
See here for more info.
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