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
Related
Ok, see if you can help me out with this one:
1) Go here: http://thepredatorial.com/DHS/index.php in Google Chrome/Firefox/IE9
2) Everything looks great
3) Go to the same web address in IE8
4) There is a gray background (that matches the outer corners) behind the slides of the slideshow that I can't seem to find out why or get rid of...
Any help?
Ok, I ended up fixing it on my own.
Because IE8 had crazy bad PNG transparency issues, I ended up making a png of the entire block above and below the transparent gifs, absolutely positioning it ABOVE everything, then z-indexing everything BUT the banner slides above the absolutely positioned element.
Crude? Maybe. However, now it works beautifully in Firefox, Chrome, IE9, IE8, and FOR GOD KNOWS what reason IE7 as well.
IE8 and below has issues with applying transparent effects to already transparent images. It appears your jQuery "cycle" effect is causing this: remove the flashing transparency, remove the grey background.
Since IE's dev tools are fairly crappy I couldn't easily test any of the workarounds posed here on your actual site, but hopefully one works for you: Problem with JQuery cycle on IE8
I've noticed some strange behavior with both Chrome and Safari on my Mac:
Mountain Lion
Safari 6.0 (8536.25)
Chrome 21.0.1180.89
The page is a simple fixed div with some text in it, I added a second div that does a simple CSS translation over 5 seconds so you can easily see the difference. My web app is using CSS transitions to show and hide portions, and while it was doing this large portions of the screen seemed to shift.
I've placed example code and a .mov file out on a server so hopefully you will see the same issue:
http://physicaltable.com/index.html and http://physicaltable.com/CSS_JIGGLE_TEST_2.mov
The strange bolding doesn't occur in Chrome on Windows 7, nor does it happen on the iPad 2 (v5.1.1)
Has anyone else seen this type of issue?
I realize this isn't much of an answer, but I've found that it's mostly because of the rendering of the elements. If the element needs to use hardware or any other type of graphics rendering, it basically takes an image of the text, adjusts it, then rerenders the text (if it can).
The "taking a picture" is where the boldness is lost, since the browser/display/something is adding the flair that makes the text look good. Of course it doesn't look that good, but that's just me.
I've noticed with different colors other than all white/black, it can behave differently. I'm hoping things will get smoothed out as browsers and rendering advances.
I found solution for this bug
its enough simply force your browser to rerender that at moment move is stopped
E.g.
$("your_element_selector").css("color", "color");
where color can be even same color as your text has
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).
This problem is only happening in Google Chrome on Mac OS X (Chrome 17). I've tested it on all the major browsers on Mac and Windows 7.
Here is the page in question:
http://dealsfortherich.com/drop/
As you can see, I'm loading divs via JQuery AJAX.
The page is always fine on "Refresh."
You can navigate pages with the left and right arrows. The problem happens when you change pages; especially when you change pages when scrolling the page quickly. Try scrolling the page down very fast and hit the right arrow.
The background images that were already loaded via CSS (for example):
.sort_block{ background: url(images/sort_block.png) no-repeat;}
start to disappear. Only background images that are loaded with CSS start disappearing. All are fine. If you open Developer Tools on Chrome inspect the elements, you will see that the browser has the correct syntax and it has already downloaded the image into its cache. For some reason, it's just failing to display it. The CSS display value is correct. In the Inspector, for the div with the missing background, if you modify a value such as "top: 8px;" to "top: 9px;" the image suddenly appears.
This is only happening in Chrome (v. 17) and Chrome Canary (v. 19) for Mac OS X (10.7.3).
Should I report this bug to Google or is there a known work around or fix? I guess I can replace the s with s but I would rather do it correctly and fix this weird issue.
I don't know if this is the same issue, but the root is probably the same: http://code.google.com/p/chromium/issues/detail?id=111218. Based on that report, I don't think there's a known fix yet.
I had the same problem and diagnosed it for hours, but it's not about your code, it's a memory related bug in latest chrome. In my experience it doesn't happen to small images, so a temporary solution would be to decrease the file size (to under 10kB or so).
I have a test file here, showing the difference between a big and a small background image.
http://kolina.fi/chrometest.html
We worked up a solution for this issue until Chromium/Chrome "fixes the glitch" (hi, Milton)...
My colleague, Andrew, posted our solution here:
http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/
You can see the page in question at:
http://www.mavenlink.com/tour
It sounds like this has worked for others as well, but it's ugly!
I've recently had this issue, and the fix was to use the complete url, rather than a relative path.
E.g. change url(images/image.png)
to
url("http://yoursite.com/images/image.png")
Use :url(.//images path. The .// should solve the problem.
MAJOR UPDATE:
I have a PNG fix working on the site. When I remove the PNG fix the red cross and border disapear. What's odd is that the problem only seems to do it with this particular image. There are other Alpha Blended PNG's on the same page that render fine.
The image is not broken (you can see it) nor is it a link. But IE6 and 7 both put a box around it and a red cross on it. It also strips the styling.
UPDATE: The image is NOT a background image, and the image is definitely not broken. You can actually see the image, works fine in Safari, Firefox, Chrome and Opera.
It's a plain old regular image tag
<div class='container'>
<img src='../images/leader_concierge.png' class='page_leader' width="917" height="257" />
</div>
here's the css
.page_leader { margin: 10px 0; }
and here's the exact same thing in safari
You are missing the replacement gif.
All PNG fix methods require that a transparent gif be available to replace the png image, it's part of how the substitution works. If that gif is missing, then you get this broken image appearance even tho the PNG draws fine.
In the case of iepngfix.htc, it expects the file to be at /images/spacer.gif
In firefox with the Web Developer Toolbar you can view broken images. In firefox the image would still be broken but you wont see anything like IE6 and IE7 show.
Note, that in xhtml (well, you closed the img tag) you should use " instead of '.
If you are using iepngfix.htc you need to open it up and set the blank image path. The image needs to be a 1x1 .gif.
Looks like I was just barely beaten to the punch.
Yes, I had the same problem, and it was also with iepngfix.htc which allows transparency in IE6.
Yes, the required accompanying gif image was on the images folder, as instructed.
So I went into the htc file and entered the exact link and now everything works perfectly!
Firefox and 'the other browsers' handle broken images more elegantly, but the image almost certainly is broken - they just aren't rendering it. Perhaps try to get in the habit of regularly checking your site logs for 404s, as it's not always obvious that you have a broken image in a contemporary browser.
Edit: Given your recent discovery, perhaps open the pngs in question in something like TweakPng - you may find that there are chunks causing this behaviour that you can safely remove. Compare the effected pngs with pngs that work properly and remove the offending chunks.