Heres the story:
When I load the following page in chrome (verified across 2 computers), it seems like about 1 in 5 refreshes results in display errors.
Often, the background image only loads halfway down the the screen, and the bottom half displays only white (which is weird b/c I have the background set to black under the image.)
There is at least one other incorrect way that it displays which is a less exaggerated version of the other problem.
Since it only happens sometimes and only on chrome (as far as I can tell) and only on one page of the site, I have ignored this issue for more pressing concerns; but I develop in chrome so I am constantly reminded of it.
I have absolutely no clue why this kind of thing would happen and even less of a clue how to remedy it. Any insight anyone might have would be greatly appreciated.
The page
Try to load your page in Safari. If you see same problem, means you missed a bracket or semi column in your css. Webkit browsers seem to handle css errors this way. I had same problem happening to me once. My css file was over 2800 lines. It took some time to find the error. Best.
See the following link:
Issue with background color and Google Chrome
This fixed the problem for me...
Related
I have a really strange CSS problem (I at least think it is CSS related) with one of my websites, on the clients iMac the 2nd column of the top menu has a unwanted top margin, and I have no idea what causes this. (you can see the problem in this screenshot)
The websites URL is: http://p538551.webspaceconfig.de/
I have already tested this in all major browsers, including Safari on a MacBook but I can not reconstruct the error, everything looks perfect on all my devices. I also tested it using browserstack - also no problems there.
Does anybody know what might cause this issue, or can at least see the problem as well?
Any help is really appreciated.
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.
I'm working on building a website, and everything is pretty much done, but I'm running into issues that, from what I've read here, are a result of webkit in firefox and ie.
Here is one of the pages that is having problems:
http://prdesignstudio.com/Seattle.html
When you load it in Chrome or safari it works fine, the images are reflected at the bottom, and there are no images on a lower row. When you open it in Firefox or ie, on the other hand, there are no reflections, and the last image in the set is on a lower row. Another thing that's odd is that the problem doesn't occur on every page, and it also doesn't seem to be based on the number of images in the gallery. (The different pages can be found by clicking on portfolio)
Anyone know how to fix this? Also, if fixing it requires me to remove the webkit portions of the .css, does anyone know of something else I can do to get the reflections? They're not necessary, but I like them XD
All the page's code can be found here: http://jsfiddle.net/2DvSP/
Thanks in advance for any help.
As for the images appearing on a lower row and the occurance of this on not all but some pages, you have inline styles set
div calss="container" style="width: 2080px;"
If you increase the width, this problems does not happen in FF4.01 and IE9.
Ok, I've been dealing with IE bugs for a long time now, but this one is beyond me. IE 7 and even 8 does it for sure, I've not seen it on FF or Chrome.
So here's a live URL which produces it: http://mog.com/music/America/Holiday
Reproducing isn't easy, it can take a few times to make it happen. Watch your scrollbar to see it change size so you know the page length was suddenly dropped quite a bit.
Here's how you do it:
Hover over any sub-nav link (Main, Albums, Songs, Photos, News, etc.)
Try them until you see the scrollbar change size. Once it does, scroll all the way down and notice the footer has jumped up on top of much of the page content.
Be careful scrolling down that you don't roll over a few other page elements that will suddenly fix this. So far I can see that any of the Play buttons will somehow fix this.
It's just beyond weird. How could a rollover state cause this kind of behavior?
I've tried:
Removing the a:hover style - THIS FIXES IT... WTF? Of course we ideally would keep some hover state, so hoping to avoid this fix.
Reproducing the hover functionality using jQuery hover(). - THIS DOESN'T FIX IT.
I figure the clues are in the elements that somehow magically fix it...and possibly in where the page jumps to, what elements suddenly get obscured by the footer.
Lastly, I didn't produce this site from scratch and it uses a lot of absolute and relative positioning for certain things and I know that is partly what causes these weird bugs. I rarely, rarely use esp absolute positioning to avoid these kinds of bugs, but it's a bit too late now.
Thanks for anyone willing to check it out!!
Well, I figured it out. It was an odd case of the "Guillotine" bug. One I luckily haven't come across before. Turns out the "special" CSS rules on those nav links' hover state (particularly it seemed the border and bg image) were enough to trip this bug. One way around was to drop those styles, but not ideal. The real fix, however, was an unsemantic clearing div placed in just the right spot. More info found here:
http://www.positioniseverything.net/explorer/guillotine.html
Hi just a short note: When did you validate your html the last time?
As you probably know, but might have forgotten, fixing your html can sometimes solve a lot of problems. There are 72 errors seen by http://validator.w3.org
I am having issues with a website that I am working on in which images and background-images fail to load in Internet Explorer 6.
Here is an example of a page on which you might experience this issue:
Example Page
So far I have looked at the following possible issues and pretty much ruled them out:
XML/Extraneous data in the image files (google photoshop 7 internet explorer)
Corrupt image files
I have not ruled out invalid markup.
I have noticed that there are validation errors in most of the pages where this problem has been reported and I am working on getting those fixed where appropriate.
The behavior I see is that the page will load and all elements other than the background image render. There are no javascript errors thrown. When using Fiddler, no request for the image is made. If the browser is pointed directly to the background-image, the cache is cleared and then the browser is pointed back at the HTML page, the background-image will load inside the HTML page.
Does anyone have any additional suggestions for ways to attack this issue?
Twice now I've had people have problems with photos not showing up, and it was because they were in an incorrect colorspace, using CMYK instead of RGB.
this is a weird issue with IE6. I just right click on the image and select "Show Picture" then the image loads properly.
I'm looking at this in IE6 and trying to replicate the problem, but I can't seem to get it to happen - it always seems to load.
Some thoughts on things to try though as there appears to be another two classes that the background is over-riding is to try adding !important after the background assignment, so:
div.gBodyContainer {
background-image:url(/etc/medialib/europe/about_infiniti/environment.Par.7366.Image.964.992.direct.jpg); !important
}
Another thing to try is getting rid of all the . in the filename and cut down the length of it, shouldn't matter, but it may be causing some problems, doesn't hurt to try it anyway.
The other thing you could try is making gBodyContainer an ID instead of a class, or give it an ID as well as a class and assign the background to the ID. Again, it shouldn't matter, but it doesn't hurt to try and see if it works, IE6 does a lot of funny things.
is it only ie6 and not ie7 too? IE is pretty strict with html sometimes, versus firefox lets you get away with more. Not sure if this helps, but I just debugged weird IE6/7 bugs by slowly taking away content. But if it's only intermittent, as in happens with the same code on and off, that's a really weird one.
The problem is the "IE6" part ;-)
I think in some cases you could solve this issue by loading the full size image before the request and hide it with style display: none; so IE6 will load the image from cache.